How to create a website using HTML, CSS and JavaScript and PHP pdf

This tutorial gives you some instruction for self-learning and step-by-step resources for learning to build a web application.

I’ve created my unique method and this method developed based on my experience.

First of all, I’ve been programming for a long time ago. I developed different projects and systems before. I used different frameworks and advanced programming languages. When I was a beginner, I have no idea about programming. So, I’ve searched a lot of things to know what is programming and how to learn it. From the beginning, It was challenging for me, and I’m really confused because I don’t know where and how to start. That’s why I created this method and sharing this to you. So you will have a tool or pattern that helps you to learn how to code easily and to know the basic principles of programming. I hope you will enjoy it.

These are the three key to learn faster:
• Interest
• Make your code
• Get your first project

First, You need to know the basic definitions of:

1. HTML — is the markup language used for structuring and presenting content on the World Wide Web.

2. CSS — describes how HTML elements are to be displayed on a screen, paper, or in other media.

3. PHP — is a highly popular server-side scripting language. It is very flexible and has a lot of innovative features. It is the fastest resource available for creating database-enabled dynamic websites.

4. MySQL — is a database management system based on Structured Query Language (SQL) which is used in web applications.

And for me, I have a simple definition:
• HTML, CSS = Front-End
• PHP, MySQL = Back-End

Let’s start with the installation
What is XAMMP?
It’s a simple and lightweight solution that allows you to create a local web server.

So, you need to install XAMPP to run your code.

Download XAMPP Installer. Choose the version that compatible with your computer. I provided the link at the bottom.
https://www.apachefriends.org/index.html

Next, just run the installer file and continue the installation. I’ve attached a screenshot so you can follow the configuration.

Click Next to continue the installation.

Select the folder where would you like to install XAMPP. Click Next to continue.

XAMPP will begin the initial installation. Click Next to continue.

Once all of the files have been installed. Click Finish to complete the installation.

Next, you need to start Apache & MySQL manually. Just click the Start button.

Once the configuration is done, go to http://localhost/ in your web browser.

Now, you have successfully installed your local server. Let’s start coding.

Let’s start coding
First, you will need a text editor to create and edit your program. There are many options on the internet, but I prefer to use notepadd++ because it is free and easy to use. I’ll give you a link so you can download it directly.
https://notepad-plus-plus.org/download/v7.5.8.html

Once you have installed the editor, you should go to the directory where you installed XAMPP. Then, go to htdocs folder.

C:\Program Files\XAMPP\htdocs

Inside of your htdocs, you should create your folder.

C:\Program Files\XAMPP\htdocs\my_folder

Then, Open your Notepadd++ and create a new file inside the folder and name it index.php

C:\Program Files\XAMPP\htdocs\my_folder\index.php

Inside the file. Write this code:

Now, test the link. You’ve successfully created your first page.
http://localhost/my_folder/index.php

Second, we need to create a header, menu, and footer. We are using PHP Include to avoid save file being repetitive.

Inside your folder, you should create those folders. I’ve attached screenshot.

Next, Go to Notepadd++. Then, create a new file header.php, menu.php, and footer.php and save it inside the templates folder.

Now, open the file index.php. Write this code:

Then, open your header.php and put this code:

As you can see, I put img tag inside the code. So you need to upload the logo.png into the“images” folder.

Now, test the link again. Go to http://localhost/my_folder/index.php in your web browser, and you can check the output.

Next, we need to set up a database. For this tutorial and I’m going to use phpMyAdmin to stored and managed data from the server. First, you need to go to http://localhost/phpmyadmin/.

First, You should create a database.

From the menu click Databases

In the database field, type the name for your database. Then click Create

Now, you have successfully created the database.

Create a new table and name it tbl_articles. Then, edit the number of columns to “2”.

Enter the following information for each field in the table. I’ve attached screenshot.

Next, we need to insert data to the fields. From the menu click Insert

Then click Go.

Then, you have now data from your local server. Now, you can retrieve it from your main file index.php

Next, you need to create a file for database configuration then include it to the index.php file.

Inside your folder, you should create the folder name “include”

C:\Program Files\XAMPP\htdocs\my_folder\include

Then, create a new file inside this folder name it config.php

C:\Program Files\XAMPP\htdocs\my_folder\include\config.php

Inside the file. Write this code:

Next, you should need to include the file config.php inside the index.php

Now, we are going to create PHP codes to retrieve the data from the database.

Remove the content on the <h1> and <p> tags and put this new code inside the section.

Finally, You can now test the output. Go to your browser, then open the URL http://localhost/my_folder/index.php

The next topic is about designing through CSS and HTML.

I hope you enjoy it!

Good luck!

Sapph