Cara Membuat Login Sistem Dengan PHP

Pada kesempatan kali ini kami akan berbagi tutorial dan hasil akhir tentang login system di php, perlu di ingat bahwa login sistem ini masih sangat sederhana sekali, tapi menurut saya pribadi login sistem ini memiliki tampilan yang lumayan keren.

Login sistem ini kami buat untuk pembelajaran di blog ini, jadi mohon maaf jika ada kesalahan yang tak terduga atau ketidaknyamanan dalam hal apapun, kami bertujuan membantu dan berbagi bersama anda kami akan sangat respect jika anda sekalian juga mau men-support kami.

ini adalah cuplikan beberapa kode yang sengaja saya ambil.

Koneksi database

/* Connect to MySQL */
 $conn = new mysqli('localhost', 'root', '', 'test'/*nama database*/);
 if ($conn->connect_error) {
  die("Koneksi Gagal"{$conn->connect_error});
 }
// table name
 $table_name = "php_users_login";

Query tabel sql

DROP TABLE IF EXISTS `php_users_login`;
CREATE TABLE IF NOT EXISTS `php_users_login` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `email` varchar(255) DEFAULT NULL,
  `password` varchar(255) DEFAULT NULL,
  `name` varchar(255) DEFAULT NULL,
  `phone` varchar(255) DEFAULT NULL,
  `content` text,
  `last_login` datetime DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8;

Insert tabel

INSERT INTO `php_users_login` (`id`,`email`,`password`,`name`,`phone`,`content`) VALUES
(1,'demo1@demo.com','123','Demo 1', '+0123456789','text content for Demo1 user.'),
(2,'demo2@demo.com','123','Demo 2', '+9876543210','another text content for Demo2 user');

cuplika HTML

. . . 
<form action="index.php" class="login-form" id="login-form" method="post" name="form1">
 <input name="is_login" type="hidden" value="1" />
 <br />
 <div class="h1">Login Form</div>
 <div id="form-content">
  <div class="group">
    <label for="email">Email</label>
    <br />
    <div><input class="form-control required" id="email" name="email" placeholder="Email" type="email" /></div>
   </div>
   <div class="group">
  <label for="name">Password</label>
  <br />
  <div><input class="form-control required" id="password" name="password" placeholder="Password" type="password" /></div>
   </div>
   <em>
   <label class="err" for="password" generated="true" style="display: block;"></label>
   </em>
   <br />
   <div class="group submit">
   <label class="empty"></label>
   <br />
  <div><input name="submit" type="submit" value="Submit" /></div>
   </div>
 </div>
 <div class="hide" id="form-loading"><i class="fa fa-circle-o-notch fa-spin"></i></div>
</form>
. . .

CSS

. . .
 {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  background: #333333 url(../img/bg.jpg) no-repeat center bottom fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}
.login-form {
  margin: 50px auto;
  background: white;
  padding: 30px 0;
  position: relative;
  -webkit-box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.125);
  box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.125);
  height: 400px;
}
. . .

Anda mungkin menyukai postingan ini