Repository
<p dir="auto"><span><a href="https://github.com/php/php-src" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/php/php-src
<h4>What Will I Learn?
<ul>
<li>You will learn how to create dynamic website.
<li>You will learn how to create MySQL database
<li>You will learn how to connet database on website
<h4>Requirements
<p dir="auto">State the requirements the user needs in order to follow this tutorial.
<ul>
<li>you must know basic of PHP programming
<li>you must know about MySql database.
<li>you must know about CSS and boostrap.
<li>XAMPP.
<h4>Difficulty
<p dir="auto">Choose one of the following options:
<ul>
<li>Intermediate
<h4>Tutorial Contents
<p dir="auto">good night steemit friend, today I will teach you how to create a dynamic website, but to make a website to complete it will take a lot of time, I will divide this tutorial into several parts so that it is easy to understand. we will start this tutorial from the login page first.<br />
okay we just start the tutorial.
<ul>
<li>The first step you have to do is create a GUI for the login page.
<li>here we will create a page for admin and user.
<li>make a folder in this directory.<br />
<img src="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmamFja4qjsbuzx7einA6Em1pikrtTqVCi5KgraG68xvXJ/gambar.png" srcset="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmamFja4qjsbuzx7einA6Em1pikrtTqVCi5KgraG68xvXJ/gambar.png 1x, https://images.hive.blog/1536x0/https://cdn.steemitimages.com/DQmamFja4qjsbuzx7einA6Em1pikrtTqVCi5KgraG68xvXJ/gambar.png 2x" />
<hr />
<ul>
<li>then open text editor, I use notepad ++.
<li>type the script below, then save it in php format.
<pre><code>
<style type="text/css">
(html comment removed:
.style4 {color: #939393; font-family: Verdana, Arial, Helvetica, sans-serif; }
.style9 {color: #FFFFFF; font-family: "Courier New", Courier, monospace; }
)
</style>
<body style="">
<center>
<table width="709" height="262" border="" align="center">
<tr width="170"> </tr>
<tr>
<td width="170" height="194" ><a href="indexadmin.php">
<div align="center"><im src="img/admin.png" /></div></td>
<td width="170"><a href="indexguru.php">
<div align="center"><im src="img/guru.png" /></div></td>
</tr>
<tr>
<td><div align="center" class="style9">
<h3>Administrator</h3>
</div></td>
<td><div align="center" class="style9">
<h3>Teacher</h3>
</div></td>
</tr>
</table>
<p class="style4"> </p>
</center>
</body>
<ul>
<li>I will explain a little about the script above.
<li>below is a CSS script for the GUI design section.
<pre><code><style type="text/css">
(html comment removed:
.style4 {color: #939393; font-family: Verdana, Arial, Helvetica, sans-serif; }
.style9 {color: #FFFFFF; font-family: "Courier New", Courier, monospace; }
)
</style>
<ul>
<li>The script above determines the color, and type of font used in the form.
<li>then we proceed to the layout and size of the form.<br />
this section is located in the body tag<code><body style=""><br />
this means the form to be created is in the center of pages<code><center>
<hr />
<p dir="auto">and this determines the size of the form<code><table width="709" height="262" border="" align="center"> <tr width="170"> </tr>
<ul>
<li>then this <code><td width="170" height="194" ><a href="indexadmin.php">is the part to enter the destination page link.
<li>and we will use emoji images for login options.<code><div align="center"><im src="img/admin.png" /></div></td>
<li>make sure you have images placed in the same directory.<br />
<img src="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmZWYBSSVnhnu9vCVrN2epiy127PN8i9pSGNjaoCxUrjQN/gambar.png" srcset="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmZWYBSSVnhnu9vCVrN2epiy127PN8i9pSGNjaoCxUrjQN/gambar.png 1x, https://images.hive.blog/1536x0/https://cdn.steemitimages.com/DQmZWYBSSVnhnu9vCVrN2epiy127PN8i9pSGNjaoCxUrjQN/gambar.png 2x" />
<hr />
<ul>
<li>I use two pictures of the two images above.
<li>below is a script for writing under the image.
<li>the action of this page is in the image not in the word.
<li>Here's the login options page.<br />
<center><br />
<img src="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmar6GJTE23FGKDzumsZ4332gCgzwxAkACPL9v3UyLXYjC/gambar.png" srcset="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmar6GJTE23FGKDzumsZ4332gCgzwxAkACPL9v3UyLXYjC/gambar.png 1x, https://images.hive.blog/1536x0/https://cdn.steemitimages.com/DQmar6GJTE23FGKDzumsZ4332gCgzwxAkACPL9v3UyLXYjC/gambar.png 2x" /><br />
<hr />
<ul>
<li>then we will create two pages, namely for the login process <em>administrator and <em>teacher
<li>we have to make the database first.
<li>run <em>apache and<em>MySql in XAMPP control panel.<br />
<center><br />
<img src="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQme8zwgJD8ReveA9DPytqynj7W4PtcY43a1w4hYcP4LTjw/gambar.png" srcset="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQme8zwgJD8ReveA9DPytqynj7W4PtcY43a1w4hYcP4LTjw/gambar.png 1x, https://images.hive.blog/1536x0/https://cdn.steemitimages.com/DQme8zwgJD8ReveA9DPytqynj7W4PtcY43a1w4hYcP4LTjw/gambar.png 2x" /><br />
<hr />
<ul>
<li>then type localhost in your browser's search field.<br />
<img src="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmQdJHSCukudYgN2CTV1FLiggkJ1ppeQrUxgS6JHBQtTrL/gambar.png" srcset="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmQdJHSCukudYgN2CTV1FLiggkJ1ppeQrUxgS6JHBQtTrL/gambar.png 1x, https://images.hive.blog/1536x0/https://cdn.steemitimages.com/DQmQdJHSCukudYgN2CTV1FLiggkJ1ppeQrUxgS6JHBQtTrL/gambar.png 2x" />
<hr />
<ul>
<li>select phpMyAdmin.
<li>write down the name of the database you want to make.<br />
<img src="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmbdGhARREai6ZBqu51x37HsQoQPki1fSFsLySW9A5KG5c/gambar.png" srcset="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmbdGhARREai6ZBqu51x37HsQoQPki1fSFsLySW9A5KG5c/gambar.png 1x, https://images.hive.blog/1536x0/https://cdn.steemitimages.com/DQmbdGhARREai6ZBqu51x37HsQoQPki1fSFsLySW9A5KG5c/gambar.png 2x" />
<hr />
<ul>
<li>then create a table and fill in the user data as shown below.<br />
<img src="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmemWLXk8cng5vktSjC2XosdBSUPETGxhWw3nSLgejqDoQ/gambar.png" srcset="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmemWLXk8cng5vktSjC2XosdBSUPETGxhWw3nSLgejqDoQ/gambar.png 1x, https://images.hive.blog/1536x0/https://cdn.steemitimages.com/DQmemWLXk8cng5vktSjC2XosdBSUPETGxhWw3nSLgejqDoQ/gambar.png 2x" />
<hr />
<ul>
<li>The password in the table above has been encrypted, the original password is not displayed.
<li>OK, the database creation process is complete, then we will create a page for the login process.
<li>Create a new file in Notepad ++ then type the script.
<pre><code>
<form id="loginform" action="indexadmin.php?login_attempt=1" method="post">
<p class=""><input type="text" id="username" name="username" placeholder="Username" /></p>
<p class=""><input type="password" id="password" name="password" placeholder="Password" /></p>
<p class=""><button class="btn btn-default btn-block">Sing In</button></p>
</form>
<?php
if(isset($_GET['login_attempt']))
{
$spf=sprintf("Select * from user_login where username='%s' and password='%s'",$_POST['username'],md5($_POST['password']));
$rs=mysql_query($spf);
$rw=mysql_fetch_array($rs);
$rc=mysql_num_rows($rs);
if($rc==1)
{
$_SESSION['login_hash']=$rw['login_hash'];
$_SESSION['login_user']=$rw['username'];
echo "<script>window.location='dashboard.php'</script>";
}
else
echo "<script>alert('wrong username or password, try again')</script>";
}
?>
<ul>
<li>I will explain about the script above.
<li>The script below is for the action of this page.<br />
<code><form id="loginform" action="indexadmin.php?login_attempt=1" method="post">
<li>mean if the login process is successful, the user will go to another page.
<li>This is the part to fill in the username.<br />
<code><p class=""><input type="text" id="username" name="username" placeholder="Username" /></p>
<li>and this is for the password field section.<br />
<code><p class=""><input type="password" id="password" name="password" placeholder="Password" /></p>
<li>if conditions for login <code>if(isset($_GET['login_attempt']))
<li>and below this is the process of selecting a table for username and password, before you have to make the file connection first.
<pre><code>$spf=sprintf("Select * from user_login where username='%s' and password='%s'",$_POST['username'],md5($_POST['password']));
<ul>
<li>this is object creation for some MySQL functions.
<pre><code>$rs=mysql_query($spf);
$rw=mysql_fetch_array($rs);
$rc=mysql_num_rows($rs);
<ul>
<li>we create two sessions in this login process.
<pre><code>$_SESSION['login_hash']=$rw['login_hash'];
$_SESSION['login_user']=$rw['username'];
<ul>
<li>and this is to call the dashboard.php file <code>echo "<script>window.location='dashboard.php'</script>";
<li>and the last is the condition opposite of the <em>if condition above, namely <em>else
<pre><code> echo "<script>alert('wrong username or password, try again')</script>";
<ul>
<li>this is the display of the login page that we created above.<br />
<center><br />
<img src="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmaquoa8xEUGJ98FW87zmS2GVUWs62hd63Jhy27FUVtZQj/gambar.png" srcset="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmaquoa8xEUGJ98FW87zmS2GVUWs62hd63Jhy27FUVtZQj/gambar.png 1x, https://images.hive.blog/1536x0/https://cdn.steemitimages.com/DQmaquoa8xEUGJ98FW87zmS2GVUWs62hd63Jhy27FUVtZQj/gambar.png 2x" /><br />
<hr />
<ul>
<li>I said before that there are two types of logins, you only need to copy the script above and just change the part of the action.
<li>okay, the tutorial is complete now we will see the results.<br />
<img src="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmdQpgErhA3tyDNoAAAafFUemzjuZi6Ffze6fa43hmS34W/gambar.png" srcset="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmdQpgErhA3tyDNoAAAafFUemzjuZi6Ffze6fa43hmS34W/gambar.png 1x, https://images.hive.blog/1536x0/https://cdn.steemitimages.com/DQmdQpgErhA3tyDNoAAAafFUemzjuZi6Ffze6fa43hmS34W/gambar.png 2x" />
<hr />
<ul>
<li>click in the teacher icon and fill the username and password<br />
<center><br />
<img src="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmNnhdi3trr56jGnKDnokAMS4qSW8WiuSBfW6kwTrdBcV2/gambar.png" srcset="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmNnhdi3trr56jGnKDnokAMS4qSW8WiuSBfW6kwTrdBcV2/gambar.png 1x, https://images.hive.blog/1536x0/https://cdn.steemitimages.com/DQmNnhdi3trr56jGnKDnokAMS4qSW8WiuSBfW6kwTrdBcV2/gambar.png 2x" />
<hr />
<ul>
<li>if the password you entered is correct then it will go to the next page, and if the username or password you entered is incorrect then a notification will appear.<br />
<img src="https://images.hive.blog/0x0/https://cdn.steemitimages.com/DQmX51pvByGBo15i48L3Biz91rqUn8onjq36CjgttWhn5fL/20181102_234824.gif" alt="20181102_234824.gif" />
<p dir="auto"><center>OKE, TUTORIAL COMPLETE
<h4>Proof of Work Done
<p dir="auto">
The code of your contribution has been found to be plagiarized from the following source here. Plagiarism is a serious offense. Your account has been accordingly banned from receiving utopian reviews.
Chat with us on Discord.
[utopian-moderator]Need help? Write a ticket on https://support.utopian.io/.
Thank you for your review, @portugalcoin! Keep up the good work!
Congratulations @jerryloyal! You have received a personal award!
Click on the badge to view your Board of Honor.
Do not miss the last post from @steemitboard: