How to create a simple text Editor on your website || PHP & MYSQL || CKEditor Quick Start Guide

hey what's up guys welcome back to the channel this is auston back again with another simple tutorial so you guys have been asking for this tutorial and here is the day i'm going to be working with the wysiwyg editor called the ck editor submit data into the database using php so to get this ck editor as you can see it's a smart wizard editor so if you're wondering what wizwig means it's what you see is what you get i want to be using this editor for this tutorial i'm going to be using the ck editor for as i did in the previous tutorial because it's what you have guys in case you never watch the tutorial i want to leave it in the description below and check it out i was showing you how you can embed this text edit on the page but it never did anything or submit data into the database so click this ck editor for overview pray that and it doesn't disappoint me so when you reach this page they'll show you the different things you can play around with it see the examples what you have to do where you sing my casa click download and when you reach that page they're going to display to you the different packages that they have there is the best one standard one the full package and the one you can customize so in the first tutorial use the standard one but let's just try the full package today so click this blue button of download give it some time and to make things clear i'm going to first save it and talk about this let me save it copy saved very quickly showing folder oh it's kind of slow you forgive me for that train folder and here it is what you have to be having for this tutorial let me first go back so this is my local disk c so you have to be having exam or wamp so for guys having example you're going to follow this tutorial but for you guys who are using wamp you'll see here a folder called wamp and when you enter that folder if you're using wamp you will see ww that's the root directory where you'll be placing your files but for you guys who are using exam then we are going to be inside this folder of htdocs and it's inside this folder where you create your folder or files where you're going to place your files so for mine i have a simple folder here called my blog and it's where i've installed the ck editor so right click on it then extract it in this directory so for you guys who are using window you see this default option they have some third-party software of 7-zip just say extract here but make sure you extract it in the same directory so they are extracting it and they will give me this folder called ck editor when i enter inside these are the files that i need for now then you can get rid of this zipped file or delete it because we don't want it right now it's use is done then make sure you open this folder in your favorite text editor right now i'm going to be using vs code you can use sublime text atom any text editor that can write code then let us minimize this because we are done installing but in case you want to follow the documentation you can come again in the header section there is documentation and i will just give you a tour around on how to link it and store it but this is the tutorial you're going to be learning everything in the same tutorial here so there is no need but if you want to work offline after this tutorial then make sure you check out the documentation and learn more because i may not cover everything in this tutorial so when we have as you can see i just have this i have the css folder and the file called dashboard.php and the file that we have all the folder we have extracted right now so these are the files that we are going to be working with so in dashboard.php i just have some simple markup i'm going to take you through it so as you can see in the head section i linked the style.css because this is not a css tutorial you can design your interface the way you want but these are just some preset stylings that i want to display on the page very very simple then let me go back to dashboard.php as you can see i have an input field here with the name of article title so this is the name that you're going to be working on in php then i also have some text area with the name of article content now forget about that let's now link the secret edit on our page it's very very simple as you can see we have this folder of ck editor you're going to come here right before the body closing tag and put our custom script tags and then we specify the source attribute and this is where you specify where that ck editor's phone so we have this folder of ck editor if you first specify the folder name click editor then forward slash so we enter inside and we look for a file called ck editor dot js so you write dk editor dot js so right now we have linked this file to our page but it's not fully loaded let us check out the browser so this is what we are having by the design as i showed you we have this input field and the text area so for the text area remember we have linked to this sequel editor will want to see or get to the area that you want to embed that ck editor in so we have to give this text area some id and this id is user defined you can call it anything you want i won't call mine article editor so this is the name that i've given this is the id that i've given to this text area so we are going to go below this ck editor group tag and we added another custom tag and using this we are going to now initialize the ck editor on the page because right now they are showing this default text area and to initialize that you can write ck editor dot replace and here we specify now the id that we gave to that element remember we have given it this id of article editor so it's what you have to write here article underscore editor end it with a semicolon save that creating the browser refresh and we are going to be having this simple ck editor as you can see we have a lot of options because we chose the full package as you can see a heavier preset with a multi-line toolbar over 72 plugins so this is what they gave us when we installed that so here we are going to be entering the title put our content and our publish button and the publish button is kinda not designed why did i forget that let us let me just give it some class of publish btn and in the stylings just say publish etn swedish is going to be 100 of the parent container padding of 10 pixels then the background color going to be teal and the color is going to be white let us refresh the page and see this is what we are having let's first give it some margin top imagine top of 10 pixels don't forget i said it's not a cs tutorial but i had to take this out of the way then some border order want it zero refresh and this is what we are having guys let me put the casa it's a pointer so that's the design having this let us first increase on the font size on size then we say button pixels hope that's fair guys so let us work on the php part so we have loaded the seeker editor in the page on the page this is what we are having we shall enter the title here how to connect how to connect i hope that's the title then you come and put in your stylings here click publish so that's what we're going to do next this is a simple design that we created let us now go to this first line so as you can see in the form the form tag takes in some parameters so the action you'll be specifying the file that you want to execute or run when you are submitting this file so the content that will be set is input fields so here we are going to have a file called process we have not yet created it process dot php then specify the method and this is very important and the method that we want to use is post because we want to post things to the database we don't want them to be displayed in the urls area because when you put get when you put get the values that we enter into these input fields they will be appended into the url so we need to use post for our url to stay intact let us go ahead and create that file in the same directory so i'm not saying that you have to reorganize or organize your files like this you can get your own structure on how you will link or access files on your website so but this is a tutorial and i want to show you how it's done so let us write process well i can't spare process dot php so this is the file that we have created remember it's the one we are going to be processing and the reason why i have not put some complicated path here is because dashboard and process they are in the same directory so you can separate these files in a different folder and you specify here a pass to them but they're going to be in the same directory so process dot php it's where we're going to be writing the php code that is going to be getting the values from these elements and submit them into the database but even before us handling this process.php we have to create a database where our files are going to be saved so that's when you access php my admin so localhost locohost php my admin so i'll be having this service running in the background but in case you don't understand what i'm saying because mine i already set it to run in the background but you have to be having this control panel just wait for it to load oh i have to refresh this page why is it taking so long so so once you have this dashboard the phpmyadmin dashboard there is some pan i won't show you but it's not loading don't know why i guess we shall give it some seconds well let's first reload it again example and this is it so you have to start the apache because yeah they will bring for you start here and also start the mysql so i already set mine to start running on open so when they the moment i open this program for them they'll be already running so you have to click start start here on this do apache and mysql so this is the phpmyadmin dashboard what you need to do is create a database so make sure you don't have the same database here on the page i'm going to click new by using my cursor and then give your database a name i'm going to call this ck editor then create click this create button and the database is going to be created and now we need to give the database name so you can call use anything you want but i won't call this blog so that's the name that i've given to it and then you specify the number of columns that you want obviously we are going to need the title the content the published date those are three columns and the id column so let's say the publish date that's one the content that's to the id the three and the published date at four so there are four columns that you want you can specify any number of column before even after as placing this go button so wait for it to process and load now here i will specify the names of the columns so the first one is going to be id and it's going to be an integer and the length is going to be 11 so here we are not saying that there are going to be 11 articles it's just the numbers after one so we can have something like let's say let me first bring up my notepad here so we are not saying that the articles are going to be 11 number but here it's the number of digits let's say because this is a huge number if you are writing something so the 11 did in billions to say that in short so it specified the numbers after one i'm going beyond hope you're not lost here and we have to extend this side we check this auto increment what we're using ai check it auto increment and it's going to be the primary key here then the next field is going to be the title so here we are seeing this i'm going to call this article title you can name it anything you want and it's going to be a voucher then i'll use 255. somebody may put a long title then the next one it's going to be this content i'm going to call it article content so you can name this one anything you want so long as you like call it write the same name when you're writing php and the type here is going to be text because we don't know how long this quantity is going to be and this is the suitable type that you can put that even if you don't specify the length you just put this text and they will know that it's going to be something huge somebody can write anything insert images audios anything you they want in that input field or the ck editor so even if you don't specify the length of length value here and specify the type of text then the last one will be like let's say that get published and this one we are going to be using the current timestamp where is it timestamp is this it yeah we're going to go with this current timestamp and then we click this save button we're seeing this casa click save the gun process and give us this so let us check out the structure as you can see we have the ids the primary key the article title article content and the date when it was published very very simple we don't need to submit this to the database the database will automatically put this timestamp then as you can see it's empty when you browse there's nothing so we need to go in our process.php and rewrite the code so but before even writing the code inside this process.php file we need to make or create a connection to the server so we need to have a connection to this interface that you're seeing here and to do that i'm going to create another folder in the same directory i'm going to call it config and inside config i'm going to create a file or db underscore connect you can call it anything you want long as you end it without php and it's inside this folder that we're going to specify the connection to our server and the database so we open php tag and this idea i'm going to create variables that are user defined they are defined by me it's not a match that you have to call them that so the first one is going to be server name and the server that we are connecting to is a localhost and the second variable that i'm going to be creating is the server username but i'm going to call it server user as i said those variables are user defined i'm just getting them from my head you can call them anything you want and here the user is going to be root for this the user the default username for the that phpmyadmin interface then the next variable that i'm going to create is the server pass password so right now i have no password on that phpmyadmin interface so there are people who have passwords on this interface but i never set mine so it's empty and i will leave that blank then lastly i'll write the db name so the database name remember we called it ck editor here we're using my cursor and we called it ck editor then let us now make a connection to that server i'm going to create a variable here con short for connection and i'm going to call this mysqli function so my sq li underscore connect and then it's going to take in these parameters they are all perimeters remember we specify them up here so this function will be dynamic in case you change the values here also here it will be changing changing dynamically so that's the reason why i first created the variables up there so we call in the server name next it will take in the server user name or the username then it will take in the password which we don't have and lastly it will connect also taking the database name so as you can see the moment you change values here they'll also be dynamically placed into this function then here we have to test if the connection failed so we shall start with the excavation mark it's a symbol for not if there is no connection if there is no cone then we shall just echo out but you can redirect users to any page that you want echo and we say build to connect to the server and then we exit we don't want php to continue executing things wow my keyboard is acting weird a keyboard that changed its language so that's it this is a connection to the database by using this mysqli connect function and replacing these parameters that having these values appear and here we test if there is no connection then they will echo this to the user welcome failed to connect to the server very very simple now let us go to our process.php file and then we process the data that we are going to be getting from this file of dashboard.php so first we open php and the first thing that we want to listen to want to check if the user has clicked on this submit button we don't want the user to just go in the url and call this file and they process it when the user has done nothing so we need to check if the user has clicked on this button with the name of submit data go back now php we use the if is set function so if is set and yeah it takes in the post variable robo variable and the name that we want look out for is submit data if somebody has clicked on this button that has that name with the submit data then we are going to run everything inside here else if they never clicked on it they tried to just go in the url and run this file of process.php then we are going to redirect them back location to dashboard dot php and in the url i'll just put invalid request so this water meaning so if the user tries to come and put word slash process process oh sorry they come here on blog remember they're in the same directory and they put process.php they're going to redirect them back to the page but in the url we shall pass in this parameter underscore invariant request so that's it if they try to process the file without clicking this button so that we first have to click this button for them to proceed or process the code that is going to be in the idea but now we have under that in case the user tries to run the process php file without clicking on that submit button then let us close that i'll remove that for now then we have under that if they try to make any validity request then we are going to get the values from these input field fields so the input field it has the name of article title and the text area with our ck editor it's having the name of article content here we are going to create variables as you know variables are user defined so the first one is going to be title and we are going to get it using this first robot variable then we get this name of article title and we pass it into here then we get we create another variable of content again this post variable and it's going to take in this name of article content then if you want it to be somehow more secure because i'm not going to add a lot of security i want this to be very very simple but we need to run this against the connection then we are going to wrap these two values inside the mysql function called real escape string and we are going to say my sql i the score real underscore escape let's call a string and this takes in two parameters so the first one has to be the database connection but we have not yet linked the database connection yet let me first copy this also down here for it now this function expects i forgot dollar sign there expect two parameters and for us to have access to this connection remember we created this connection but we don't we are not using it yet in our file then we need to we can place it up here but i want to require that connection when everything is set so i'm just going to say require underscore once and since they're in the same directory of process.php and this folder in the same directory i'm going to specify the name of the folder which is config word slash so we want to enter inside and connect to a file sorry we connect to a file called db underscore connect dot php so we have included that file or connection in our process.php file and since we have linked this in our process.php file we get access to this variable of con and remember what i told you this mysql real escape string function takes in two parameter or expects to perimeter and the first which has to be the database connection remember that's what we wrote here to connect to the server or the server connection i said database it's okay because it's also the server so we're passing that also come here and the blender here then also passing the connection so that is set we're just passing some security against the values that are being submitted in by the user can stream remove extra content stuff like that but it's not a story about security i just want to show you how you can submit data using the seeker editor then the next thing that i'm going to do is check if these fields are not empty so the user may just submit without feeling anything so you're going to start with checking the true the truth so if not empty if this field is not empty and which field are you talking about the field this variable that is storing the value of article title if it's not empty remember this exclamation mark stands for not so if not empty if this title is not empty o not empty oh sorry if also this content is not empty then we are going to run the code that will be inside here else if they are empty then i'm just going to redirect them back so header then specify the location where you want to take them and i'm just going to redirect them back to the dashboard php then i'm just going to put in an extra parameter in the url i say empty fields remember the semicolon and we exit we don't want php to execute continue executing the files or the code below so right now we have under this issue if the fields are empty because if you have to check here if i try to submit they're going to redirect me back to this dashboard so this is what this function is doing the header function it checks if these files are empty then they are going to redirect me back and if you are checking the url they will say empty fields but you can get ways of displaying errors to your user i just i'm just making this to show you that it's possible then let us go inside here so if they are not empty then what are you going to do then i'm going to run or create an sql statement or query say insert set into so you specify now the name of the table and the name of the table is blog of the table name setting to blog here you specify the columns that you want to insert into the first column that we want to insert into is the article title so remember the id is auto incremented then we want to get that at go title and if you don't specify the id first then comma then what other column that you want insert into the article content and then remember this is also submitted or put in by the database then you specify the values so values to the values that you want in starting through the database and they are going to be strings so remember to put single quotes here and these are the values that you want to enter into the database or submit into database put a comma also records and the content and end it with a semicolon but you can also decide and this square query with a semicolon here don't have any effect on your code so this is just ending this sql statement and this is ending php the last semicolon is ending php so when is that when we have created this query then we need to execute it into the database i'm just going to write another variable here just going to call it execute and i'm going to call sql function.php function called mysqli underscore query so what this does it runs the query into the database it takes in two parameters first it takes in the connection to the server and also the query that you want to execute or run into database end it with a semicolon and here we are going to check if the if the execution failed so if not execute so this is user defined it's not php that you have to write same way like this remember to put a dollar sign here if if not execute it's like if this execute failed then we are going to echo to the user build to submit the data then we exit we don't want php to continue running the code else so when everything was successful you're going to echo and say article published successfully and then we exit we don't want php to continue running the code below so let me hope you guys are not confused remember we created the sql query here or statement inserting to a table which is blog and these are the columns that we want to insert into and the values are the ones that we got up here so remember i thought you can run more security on these input fields like trim them move those extra spaces stuff like that then once we created this query then this function will run it or execute it into the database remember it takes in two parameters first is the server connection and also the query that we want to run into the database and here we check if it failed so this exclamation mark will say not let's say if it's not executed then we spread this to the user field submit the data else if it was successful then they display article published successfully very simple so let us go test this in the browser hope there are no mistakes fingers closed put so i already submitted some data here it may start like at id number three but yours will be one so how to create a wordpress theme for the content let me first bring my windows 7 win1 on windows 10 so let me use this run function run run to five and they'll give me this simple paragraphs just one choose them for so right now we have this we can bold stuff you can make text italic you can make headlines or headings sorry section one can come here and come to normal then get to that you can underline it you can mark stuff you can insert links sorry let's say this you say oston or decipher.com and you can specify the target attribute let's say to blank you want it to open a new window so stuff like that when we click publish they are showing article publish successful that means this query was executed successfully into our server because remember we linked to the server here let us check our database if i click on this browse you have to see as i told you they may start at id 3.0 i published some articles and deleted them so this is what we are having remember this is put in by the database we chose the current timestamp let me see yeah the current time stamp here and i don't want this here i don't know because it will always update an update they will use the current timestamp let me change this because you don't want your publish date to change when you update it has to stay there in the extras here just want to leave it to unassigned save that or you have an error in your syntax click this whoa current times down so guys i don't know why it refused for this tutorial but i'll let you know when in the comments or description below because i don't know why but in the next tutorial if you know the reason let me know in the comments below in the next tutorial we are going to be fetching this data from this database and display it somewhere on the page because you may want to display this to the your users so guys if this tutorial was useful to you just go ahead and subscribe to the channel like the video and i always see you in the next tutorials peace you

Channel: Oston Code Cypher

Views: 9,302

Keywords: howto, web development, how to code, the best skill for developer, top developer skill, Rock-solid, free WYSIWYG editor with collaborative editing, 200+ features, full documentation and support, how to, CKEditor Quick Start Guide, CKEditor, Smart WYSIWYG HTML editor, Collaborative rich text editor

Id: xhwP5kyuqXo

Length: 46min 29sec (2789 seconds)

Published: Sat Aug 08 2020