PHP : Creating a CMS in 1 HOUR

hi and this is the long-awaited CMS tutorial now I already got my CMS folder here and I've got my index dot PHP file inside I've also got my assets sub directory which contains our style sheet now before we get into coding any PHP we are going to create the design of our site so I'll assume you have basic knowledge of HTML and CSS so we'll take things slowly so let's get started we'll create my HTML tags inside here we'll have our head and body tags so the head tag we will have title CMS tutorial and we need to link to the style sheet so we'll quell a cost I'll see hate for F equals assets slash style dot CSS so now in our body we need to create a container so div class equals container and in here we will create our logo so a href equals index dot PHP ID equals logo and we'll just call this CMS for now because of our anchor tag now what we need to do is create a list so I'm just going to add a couple of old hugs which stands for ordered list and inside here we will have a li and a hatre cuz those off and this will be linked to something like article dot PHP ID equals 1 and this will be our article title so that looks about good free openness of no browser it's quite ugly at the minute but that's about to change so in our style of CSS file we are going to set the width of container to 500 pixels and we are going to send rate using margin:0 auto there we go now this is a little bit close to the top of the page so I'm just going to add some padding to the body so padding top equals let's say 120 pixels and we're also going to change the font family to area there we go now these default link colors look a little bit off-putting so we are going to fix that so a link visited we will make the color slate gray with a text-decoration:none just get rid of that underlined and we'll also add a bottom border of one pixel dotted slate gray so this is looking nice so far next we need to change the hover so we'll set the color to let's see seven seven seven and then we'll make it a bit darker let's try four four four yeah that looks nice and we'll set the border bottom color to four four four so there we go we've got our basic style ah actually let's do this article title we will output the date it was posted so it'll be sort of like small hosted website into January I'm just going to organize this a bit so a lot under the screen like so so now everything looks good yeah I think that looks nice so in the last tutorial we styled our index page now we will actually be connecting to the database so the first thing we need to do is create our other sub directories so we will create a new folder in CMS called blue clothes and another one called admin inside includes we're going to create a new file called connection dot PHP and in here we will be using PDL to connect to the database if you don't want P do is I'm not going to sit and explain it Alex already has a great course on video so go check that out if you've never used it before otherwise just keep watching so I'm going to open up my PHP tags and we're going to assign the variable video to a class instantiation and inside here we'll say MySQL : host equals localhost semicolon DP name equals CMS and in our second parameter our user is entered so allow you to name is Roop and third parameter is our password which for me it's also root now I'm going to surround this in a try-catch block you know exception e and we'll just exit database to error so this is saying is if this fails then do whatever is inside here so we can close this for now is well now now we need to include the file looks like our index dot PHP page so include ones include slash collection dot PHP and if we open this open our browser and refresh we will probably get an error because we haven't actually created the database yet so to do this we need to go to PHP myadmin we need to click on the databases tab and create our database alkaline CMS and inside here we are going to create a new table called articles for columns our first column will be article ID and that will be an integer with primary index and auto increment to enable next column will be article title larger to 55 article content text which doesn't need a limit and article timestamp which is also so we'll just save this and now what we need to do is insert some data contain so we don't need to enter anything into our clydie because the column is set to auto increment it will do that follows so in article title and Killoran episode and in article content i will enter a paragraph from lips and a column now in the time stamp we need to actually get the current timestamp so we're just going to go back here and echo out time now we can copy and paste this into here and we'll just click go so we've created our database we've connected to it we've created our articles table and we've and we've inserted a row I think that will be all for this tutorial in the next part we will be actually fetching the articles from here and outputting them here welcome back in the last tutorial we created our database and connected to it this tutorial we will be displaying the articles so we're going to open up our coding it and create a new file inside includes called article or PHP and we are going to create a new class called article inside index dot PHP we are going to include it so blue clip words include slash add call the PHP and we are going to instantiate the class and assign it to a variable so now what we need to do is create the method to fetch the add course so public for table function fetch or now inside here we need to retrieve the articles from the database and to do that we need access to this variable here unfortunately inside functions we don't have access to it unless we make it global which we are going to do now so global PDF now we can use that variable freely so what we want to do is PDO prepare and inside here we will enter our SQL select all from articles then we need to sorry first we need to assign this to a variable then we need to execute query and now we are just going to return query fetch oh now this is all PDO if you don't understand it as I said in my last tutorial Alex does have a series on it so go check out anyway back in here we need to assign the variable articles to this method so what will happen here is we will go to article factual method we will select automatic holes we will execute the query and the function will return all rows inside the table articles so if we just print our articles we should see our data like so so what we need to do now is make this dynamic so we are going to use a for each loop if you don't know what a for each loop is it's basically same for every element in the array do everything inside the loop so for each articles as article and just close this off so for every element in the articles array do this so what we need to do now is make this actual data dynamic so we're going to change this ID here to article ID so we're going to echo log article article ID and here we're going to change this to the article title so echo article article title and in here we are going to well things going to get a little more complicated here because we will be using the deck function so we just echo PHP echo date and in the first parameter we enter the format that we want your date to be so I'll just say ljs l means a shortened version of the day so if it was Tuesday it will be shortened to chew and Jas means the number and the little th are the nd if you not me and there's a second parameter we are going to pass the actual timestamp so I'd call I'd call timestamp so we're just going to say posted so there we go I just want to make one small adjustment to this if we add a rule to our CSS change the color to 999 and the text declaration italic sorry font style is it yep so that looks much better in my opinion so that is all for this tutorial the next one we will be creating the actual display page so we will be echoing out the actors so we will be displaying the actual article so now we have our list of articles done the next thing we need to do is the article page so let's create a new file called article dot PHP and in here we are going to include these files I created with the index.php and in here we are going to well first we're going to check if the user has specified an ID so we're going to say if is set get ID and in here will display the article else will say header location index dot PHP and we'll just exit so now inside here we're going to say ID is equal to get ID well now what we can do is create a new method in article now class public function fetch data and it will have the argument article ID so we're going to say global PD organ query equals P do prepare select all from articles where article ID equals question mark and we are going to bind a parameter so I'm final one again I'm not going to explain what this is you'll pick it up if you don't know is as a article ID so what we saying is select automatically where article ID equals the variable article ID so we're just going to execute the query and we will return query fetch so now data equal to article oh it's a fetch data ID and we're just going to print our this out to see very thing it's working sorry oh here we go undefined variable article oh of course we need to instantiate the class so let's try this now there we go so what we need to do now is create the actual page so we're just going to close and open our tags here and we're going to copy this template from here just just paste it in here now what we want to do I'm just going to fix this invitation so now what we need to do we've got a local here we just need to change this so we will say h5 actual note we'll make this h4 and we'll just echo article article title sorry data article title h1 so let's try this out there we go allow me to display the date that was posted so we'll say in here small it's just to make this a little bit long readable small posted and in here we're going to use the date function again ljs and we will pass the timestamp so let's try this there we go so that is that now we need to add our paragraph tags PHP echo article article content and this will be data again sorry about that let's just try this out now that looks good we just need to change the line height here to increase readability where are we here we go so P line height I will say 30 yep I think that looks nice so let's see we're going to do is add a nice little back linking so we don't have to keep hitting the back button in our browser so where are we we will type Al Kut AG will just like this a dummy look for now so we can style it and we'll say and L a Double R which stands for left arrow it's a HTML entity back so let's see how this looks yep that looks fine to me we just need to change this to index dot PHP and there we go so we've got a fully functional CMS so far we just need to add the admin and which we will look at in the next part ok so in the last tutorial we created the article page now what we need to do is create a control panel where we can edit and add the articles so to do this we need to go into phpMyAdmin and create a user table for three colors first column will be user ID which will be an int with a primary index and oil increment enabled we will have user name by tracking five value and then we'll have user password which will also provide try to fire five so now what we need to do is add a user I'm just going to call mine admin and for the password we are going to use md5 encryption it's not ideal it is pretty easily crackable well that's one way to point if we if we were actually creating a secure application we would want to be using Blowfish you can do --gel that if you want but for now we're just going to use md5 so to get my password and go to o´clock index dot PHP and just echo out md5 password so now we can copy and paste this into our input and go so now we've got our users table and our first user what we want to do now is create our index file in admin so now we're going to o clock without PHP tags and we want to include our collection file so include wipes includes slash collection dot PHP before we get started with the admin I just want to we can remove this line for now I just want to add a little link under here just make it a little bit easier to navigate so I'm just going to add a line break and inside small tags we're going to add an anchor linking to admin and we'll just call this admin so that should work there we go so the first thing we want to do is start our session and now what we want to do is check if the user is logged in so we're going to say if it set the session log in and if that is true we'll display index else will display logging so what we need to do now is create our login form so just going to close off our PHP tags and we open them here and we need to copy and paste this page we can remove the admin link because we're obviously already in admin and we remove the list because we want to display our articles so what we're going to do is create a form action index to PHP let it equals post and because I already have my IceWEB saved for this I'm going to turn autocomplete off you don't need to do that then inside here I'm going to create an input field the type equals text name is username and placeholder is username now we want a password field password no equals password I'll place all the equals to password and we want ours to label so input type click on submit and we're just going to change the value to login so we should look good now first we need to fix this link because we're not in the same directory we need to edit the path that should look a little bit there we go now I just want to add the library after this just to separate it out a bit to line break sorry there now we've done that we need to do some validation so what I'm going to do here is check if the user has click the submit button so I'm going to say if it said post username and post password then we will assign the variable username to whatever the user entered and password to post password so now what we want to do is check if the user actually typed anything in the field so we're going to say if empty user name or empty password and we will say error equals all fields the quake now I want to display this error above the phone so what I'm going to do is PHP if you set error so if the variable error is defined then we will say small style equals color a oh oh oh oh which is just a dark red and we will echo out error and just close off our attack so first before we do anything we need to add our line breaks so if we test this up this needs to be inside the if stable so if we test this out if we just leave my water fields and think we should see our error there we go so what we need to do now is check if the user has entered the correct credentials so if empty is now so else will say query equals PDO prepare select all from users where user no equals question mark I'm using password equals question mark and we need to bind our values so query by value or user node to password query executes to actually execute the query and now we will say mu equals query row code so what we're doing here is we're saying select all from users our table where the user column username column equals this what these are entered and sorry and password equals this and then we are binding these variables to these question marks we are executing the query and then we are getting the amount of rows so what we need to say now is if learn equals one user entered correct details elf user entered false details so we're going to say sorry error equals incorrect details so now if we enter some bogus stuff in here we should see our error now quickly before we run out of time I'm going to say [Music] logged-in equals true and we will reload the page using header so header location index table PHP and we will just exit this out to prevent any of this being displayed so let's try this destroy refresh our page and we will enter our details I've made a mistake we need to encrypt this isn't md5 so now let's test this we'll say our username is admin and our password is password there we go we are now logged in so in the next part we will be creating our template and we will create our add article page our elite tactical page and possibly our edit article page but before we get going I made some changes to this CSS ok I added some light height to the Lee and I also styled the forms a little bit I won't explain what this does you should know CSS by now so I'll just close this and what we need to do this time is create our index page so we're going to make a salsa row here and we'll just copy this template from here and paste it in now we can remove these we also only need one line break because our list will add margin so going to say all and in hey this will act as a kind of navigation so we'll say Lee a hatre add dot PHP I will say add article closer will also say the leap dot PHP delete article and we also need to add a logout page so let's see how this looks I think that looks alright so we're going to create the actual add page now so so we're going to create the actual add page now so if we just create a new file in ugli we save it as I do PHP open up our PHP tags and we also need to include our connection file and we need to start the session so we'll just copy these lines now what we need to do is check if the user is logged in otherwise anybody could add articles only double-knot so we're going to say if is that session log in so we'll display a page in here else we will just redirect the user to index so what we're going to do here is display a four so just close your file PHP tags and copy our template again based in and underneath our line-break we will replace this with a head of four tag and we'll say add our code I don't tha here we are going to add a form so say form action equals add the PHP lets it post and I'm just going to turn autoplay off and here we need three inputs so say input type equals text this will be our title field so lame equals title placeholder equals title add the line break after this explai will add to no need to add a text area will say rose equals 15 and calls equals 20 so a placeholder equals content and name equals content so if we click on add article I think I want to change the size of this a bit so we'll say cos 30 rope that's right 50 yep that looks alright now we need to add our line breaks here and we need to finally a down so people so input type equals submit and we'll just say value and add code so there's our formal what we need to do now is actual validation so we'll go back to our code and just before the template will say if accept post title and post content and we will assign variable title to what these are entered and the same content I'm now we're going to do is check if the user actually entered anything so we'll say if empty title or empty content error equals all fields are required now I'm just going to quickly copy and paste our error message from our login form so just copy this and paste it in under our header tag so let's test this out we will click select without actually entering anything and there we go we've got our error now what we need to do is add an else type so if the title and content are not empty we will actually insert these into database so we're going to say query equals video prepare insert into articles and we will specify the columns article title i've called content and add called timestamp and we'll say values question mark was from that question mark so now we need to bind our values so say query time valley 1 title so this is referring to the first question mark here which is article title query by value 2 which is our content and finally 3 which is time the current timestamp so now all i need to do is execute the query and redirect the user to index and hopefully this will work so if we enter it here [Music] and click Add Alco and we just our homepage a and this see we have our article here and once we click there we go everything is working perfectly it's just one thing that we need to fit if we go back to our control panel and add article you say hello and we just type anything here if we add line breaks like so and refresh here it don't actually add line breaks so the fix that we use the PHP function ml to we are which what this does is automatically convert line breaks into the HTML ER ok so if we just click back and add another article so testing and we just add our article refresh here and there we go we've got our line breaks so thanks for watching next time we will be adding some fortunes to delete of course so in the last tutorial we created the add article page now what we're going to do is allow our admin to break articles so don't go into our code and add a new page to oddly called the link PHP and we're just going to copy this into here and close off our PHP tags now as usual we need to check if the user is logged in so if is set session log in and in here we will display the link page else we all free directly we will redirect the user to index dot PHP now we are going to paste our template in here so we can just copy this and the way we're going to do this is we will display some sort of drop-down list in all our article titles and when the user select an option it will automatically submit the form using JavaScript so that yep now we're going to paste old template and we are going to replace this with a form just add next to line breaking and we're going to say form actual equals the little PHP and method equals skip we're not going to be using post this time we're going piece and get now what we need to do is fetch the articles and we've already done it before so first we need to include our aqwal class and instantiate err I mean here we are going to stay look at calls equals add call that's all and basically we're going to do exactly what we did in the index file here except with a for each loop we're going to say select select now in here we're going to be using javascript to automatically submit the form once these as selected an option so we're going to say unchanged because this form dot submit inside here we're going to use our for each loop so PHP for each articles as a score just close it off here so for each for every alcohol allowed eight base we go to echo a so going say option value will just leave that for now I will say option we're going to change this to article at school ID and inside the opportunity we're going to echo up with the echo list to an inside the option we're going to say echo our core article title and this looks a bit messy how this looks a bit messy I'll just sort it out although I just disabled the word wrap and fixed up a bit know what we're going to do is what I think we're done let's check this out so say the echo oh oh done something wrong here I misplaced this in my colon let's post go on the in her life now let's try there we go we've got our list of articles I just want to add a quick head attack here so select an article be the leap close that I've got our template don't know what we need to do is actually delete the article once the user has kept all of these options so just on the here actually first I forgot to set a name so we're going to say name equals ID on the select and then here we're going to say if is set yep ID so if the user has chosen an article and then we're just going to go query equals P do the leap from articles where article ID equals question mark first just to clean first just to clean this up a bit I'm going to say ID equals get ID and then here we're just going to find the variable fix that one equals ID and then we're going to execute the query and then we will refresh the page source a header location the leak dot PHP so let's test this bad boy out refresh the page select an article and if we take another look the article is going so we've leaked the article we've listed the articles we can add articles it looks like we're just about done I just want to change one last thing I would do add a feature so we can log out so I'm going to open like TextEdit Aragon's I'm going to create a new file in a group called logout dot PHP and we'll just so we don't need this this done so which we do need to start the sessions obviously so say successful start we don't need to connect to the database though so we don't need to include our connection file but just going to say session destroy and then we will redirect the user to index dot PHP so if we click logout there we go now we can look back in where we can add our calls and be articles

Channel: GoThink eLearning

Views: 219,589

Keywords: PHP, CMS, TUTORIAL

Id: QNxU3Qa6QZs

Length: 46min 3sec (2763 seconds)

Published: Sun Apr 23 2017