Create Your First Website ( from Scratch )
Create your first website from scratch (for beginners)
To give you a proper intuition on how to create a simple website let's dive-in and create a TO-DO List web-app.
Programming/Scripting Languages used -
We will use HTML and CSS to create front-end and Php with MySQL in back-end of the web-app.
We will perform basic CRUD(Create, Read, Update, Delete) operations in this web-app.
Tools used -
1. Xampp -
Xampp is an open-source software that provides Apache Server, MySQL database and Php in a single package.
There's no need to install ans setup these things seperately.
Xampp provides all these technologies in one wrapper.
2. VS-code editor -
VS-code editor is a very popular and light-weighted free editor for programming, it supports various programming languages and plugins for the same.
Setup and Configure tools -
1. Install XAMPP -
- Visit the website ( https://www.apachefriends.org/download.html )
- download and install
- start Apache server and MySQL database as shown below :
2. Install VS-code Editor -
- Visit the website ( https://code.visualstudio.com/Download ) and download setup
- after downloading setup, install the package and open it
- Create a directory structure to store files -
- Visit the Xampp folder were you have installed it (probabily c: drive of your computer), there you findd a 'htdocs' folder, go inside that folder
- Now, create a folder with name 'ListApp' inside htdocs folder.
- Open VS Code Editor, click on 'File' option on left top of the window, inside that, click on 'Open Folder' option and then select the 'ListApp' folder and open it like this -
- Go inside ListApp folder and create a file 'index.php' and append the following code inside index.php file :
<?php
// Making connection to Database -
$con = mysqli_connect("localhost", "root", "", "list_app");
// If add is clicked -
if(isset($_POST['add']))
{
$list_item = $_POST['list_item'];
$insert = "insert into items (item_name) values ('$list_item')";
$run_insert = mysqli_query($con, $insert);
}
// If delete buttin is clicked -
if(isset($_POST['delete']))
{
$value = $_POST['id'];
$del = "delete from items where item_number='$value'";
$run_del = mysqli_query($con, $del);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List-App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>To-Do List-App</h1>
</header>
<section>
<div class='form'>
<table>
<tr>
<form action="" method='POST'>
<td><input type="search" name="list_item" id="list_item" placeholder='Enter Here to Add' required></td>
<td><input type="submit" class='add' name='add' value='ADD ITEM'></td>
</form>
</tr>
</table>
</div>
<div class="list">
<table>
<?php
$display = "select * from items";
$run_display = mysqli_query($con, $display);
// Display Data from Database -
while($data = mysqli_fetch_array($run_display))
{
$display_number = $data['item_number'];
$display_name = $data['item_name'];
$display_time = $data['item_time'];
echo"
<tr>
<td><h3>$display_name</h3><small>$display_time</small> </td>
<td><button name='delete' class='delete' style='margin-left:20%;'><b>DELETE</b></button><input type='hidden' name='id' value=$display_number></td>
</tr>
";
}
?>
</table>
</div>
</section>
<footer>
</footer>
</body>
</html>
- Now, create a CSS file inside the ListApp folder with name 'style.css' and append the follwing code into it -
*{
font-family: verdana;
text-align: center;
}
.form{
margin-left: 35%;
}
input[type='search']{
width:400px;
height: 35px;
border: 2px solid #ddd;
border-radius: 5px;
}
input[type='submit']{
font-weight: bolder;
width:100px;
height: 35px;
border: 2px solid #77c5eb;
background-color: #fff;
color: #77c5eb;
border-radius: 5px;
}
.delete{
font-weight: bolder;
width:100px;
height: 35px;
border: 2px solid red;
background-color: #fff;
color: red;
border-radius: 5px;
}
.delete:hover{
transition: 0.3s ease-in;
background-color: red;
color:#fff;
}
input[type='submit']:hover, input[type='search']:hover{
transition: 0.3s ease-in;
border-color: #fff;
background-color: #77c5eb;
color: #fff;
}
header h1{
font-family: stencil;
}
.list table{
margin-top: 2%;
margin-left: 43%;
}
small{
color: #888888;
}
Now, Run the web-app :
-> Open any browser and type "localhost" in the URL bar and click enter and you will see something like this -
-> Now, Click on your ListApp folder option
-> and it's done, you will be able to see something like this -
Now you can add some list items into it -
What you have learnt (Gist) -
-> how to create a website using HTML and CSS in front-end and PHP as back-end language with MySQL Database.
Resources to learn :
- HTML - https://www.w3schools.com/html/
- CSS - https://www.w3schools.com/Css/
- Php - https://www.w3schools.com/php/php_intro.asp
- MySQL - https://www.w3schools.in/mysql/php-mysql-conection/
- JavaScript - https://www.w3schools.com/Js/
Hitesh Choudhary
- https://www.youtube.com/user/hiteshitube
Programming with Mosh
Programming with Mosh
- https://www.youtube.com/user/programmingwithmosh
freeCodeCamp
freeCodeCamp
- https://www.youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ
Traversy Media
Traversy Media
- https://www.youtube.com/channel/UC29ju8bIPH5as8OGnQzwJyA
Dev Ed - https://www.youtube.com/channel/UClb90NQQcskPUGDIXsQEz5Q
Dev Ed - https://www.youtube.com/channel/UClb90NQQcskPUGDIXsQEz5Q
Sample Web-development Project with source code -
- https://github.com/panthitesh6410/-django-Polling-System
- https://github.com/panthitesh6410/django-portfolio-website
- https://github.com/panthitesh6410/MongersClub
Link to previous blog :
- https://grabinterestingconcepts.blogspot.com/2020/06/a-road-map-to-web-development-for.html
Comments
Post a Comment