ProPannel: html

Menampilkan Data Acak Dari Database ke Halaman Web -

Dan pada artikel ini saya akan menjelaskan cara menampilkan Data dan di acak dari Data base ke halaman web dengan mudah dan cepat.

Bahan yang di butuhkan yaitu Cpanel jika belum punya bisa pakai XAMPP tpi saya memakai Cpanel.

Tidak usah basa basi langsung ke tutorial membuat nya :D

1 . Buat data base terlebih dahulu

2 . Buat File koneksi.php dan masukan source di bawah ini

<?php
$link = new mysqli("localhost", "propanne_test", "12Sampai3", "propanne_test");
$result = $link->query ("SELECT * FROM data_hasil ORDER BY RAND() LIMIT 2");
while ($row= $result->fetch_row())
{
   echo "$row[0] $row[1] $row[2] $row[3] $row[4]";
   echo "<br />";
}
?>

3. Buat Nama database

4. Buatlah data Base nya dan bisa di samakan .Fungsi Varchar untuk hasil Text sedangkan INT untuk Angka

5. Buatlah hasilnya di EXEL dan Jngn Lupa save ke CSV

6. Pilih Tab import pada PHP MY ADMIN terus pilih File kemudian cari Hasil CSV tadi lalu GO

7. Cek di jelajahi kalau Berhasil maka akan seperti ini

8. Setalah selesai Cek Di Web maka hasilnya Akan acak acak setiap kamu refresh web nya

Dan sekian Tutorial dari saya jika belum paham bisa tonton Video tutorial saya di Sini

.Jika mau bertanya bisa di komentar.

Jika mau Request tutorial bisa PM

Untuk Contoh web yang sudah jadi

Itu bsa kalian Uwik uwik lagi source nya agar terlihat Lebh keren :D

Membuat Form Login Dengan PHP Dan CSS

Login disebut juga “logon” atau “sign in” adalah istilah dalam hal keamanan komputer, yakni berupa proses pintu masuk bagi pengguna untuk mengakses sistem komputer. Login dimaksudkan untuk mengatur proses identifikasi. Berbeda dngan logout, proses login membutuhkan hal spesifik tertentu. Dengan teknologi terkini, proses login semakin diperketat dengan enkripsi secara hardware, seperti proses scan sidik jari dan retina mata.

Cara Membuat Form Login Dengan PHP dan CSS

Baiklah mari kita langsung ke tutorialnya sekrng ,dan di Sini saya akan memberikan Tutorial membuat Form Login yang keren dan standart

Bahan : - Kesabaran dan Teliti
- Hosting kalau tidak Punya bisa pakai XAMPP

Tutorial :

1. Buat File dengan nama Index.php lalu pastekan script bawah ini

<!DOCTYPE html>
<html>
<head>
  <title>Form Login Menggunakan CSS</title>
 <link rel="stylesheet" href="style.css" type="text/css">
 <style>
 img {
   width: 150px;
   height: 150px;
   border-radius: 50%;
}
</style>
</head>
<body>
  <h2>
Form Login</h2>
<form action="login.php" method="post">
    <div class="imgcontainer">
     <center>
 <img src="gambar.png" alt="gambar"></center>
</div>
<div class="container">
     <br>
       Nama kamu:<br>
       <input type="text" name="nama" value=""placeholder="Masukan nama kamu"class=form-control required>
         <br>Password:</br>
       <input type="password" name="password" value=""placeholder="Masukan Password kamu" class=form-control required>

       <br><br>
       
       <input type="submit" value="Login">
    <input type="checkbox" checked="checked"><span>Ingat Form Saya</span>
  </div>
<div class="container" >
    <a href="#"><input type="button" value="Lupa Password"></button></a>
    <center>
<p>
Copyright © 2018 <a href="https://onessh.net">Team OneSSH and @ProPannel.site</a></p>
</center>
</div>
<!--/ .footer -->
  </div>
</form>
<style scoped="" type="text/css">
 
input[type=text], select {width: 100%;padding: 12px 20px;margin: 8px 0;display: inline-block;border: 2px solid #25aae1;border-radius: 4px;box-sizing: border-box;}
input[type=email], select {width: 100%;padding: 12px 20px;margin: 8px 0;display: inline-block;border: 2px solid #25aae1;border-radius: 4px;box-sizing: border-box;}
input[type=submit] {width: 100%;background-image:linear-gradient(to right,#25aae1,#40e495,#30dd8a,#2bb673);box-shadow:0 4px 15px 0 rgba(49,196,190,.75);font-size:16px;font-weight:600;color:#444;color: white;padding: 14px 20px;margin: 8px 0;border: none;border-radius: 4px;cursor: pointer;}
input[type=submit]:hover {font-size:16px;font-weight:600;color:#fff;cursor:pointer;text-align:center;border:none;background-size:300% 100%;border-radius:50px;moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
input[type=button] {width: 100%;background-image:linear-gradient(to right,#25aae1,#40e495,#30dd8a,#2bb673);box-shadow:0 4px 15px 0 rgba(49,196,190,.75);font-size:16px;font-weight:600;color:#444;color: white;padding: 14px 20px;margin: 8px 0;border: none;border-radius: 4px;cursor: pointer;}
input[type=button]:hover {font-size:16px;font-weight:600;color:#fff;cursor:pointer;text-align:center;border:none;background-size:300% 100%;border-radius:50px;moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out}

#comments,.post_meta,#blog-pager{display:none}
</style>
</body>
</html>

2. Buat File dengan nama style.css lalu pastekan script bawah ini

*{
    padding: 0; margin: 0;
}
h2{
 color:#50626C;
 text-align: center;
 font-family: arial;
 text-transform: uppercase;
 border: 3px solid #f1f1f1;
 padding: 5px;
 width: 490px;
 margin: auto;
 margin-bottom: 10px;
    margin-top: 20px;
}
form {
    border: 3px solid #f1f1f1;
    font-family: arial;
    width: 500px;
    margin: auto;
}

input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}
label{
 color:#50626C;
 text-transform: uppercase;
}
button {
    background-color: #049372;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}

button:hover {
    opacity: 0.8;
}

.cancelbtn {
    width: auto;
    padding: 10px 18px;
    background-color: #f03434;
}

.imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
}

img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container {
    padding: 16px;
}

span.psw {
    float: right;
    padding-top: 16px;

}
img {
   width: 350px;
   height: 350px;
   border-radius: 50%;
}

3. Tambahkan gambar.png untuk membuat gambar bulatnya seperti Gambar di atas
4. Kemudian coba akses dan hasilnya :D ,sdh bgus kan

Dan itu saja untuk pembuatan Form login sederhana dan Keren tentunya
Jika msh belum paham simak Video berikut ini
Download source Code Form Login ini,supaya tinggal upload dan Jadi :)
Di sini

ProPannel

Senin, 28 Mei 2018

Menampilkan Data Acak Dari Database ke Halaman Web -

Menampilkan Data Acak Dari Database ke Halaman Web -

Sabtu, 26 Mei 2018

Tutorial membuat Form Login Dengan PHP dan CSS

Comments