DayliLife85 | ORARI | Event Special Call ORARI Lokal Klaten | Mukti911 | #1

Assalamualaikum Wr. Wb.

A. Pendahuluan
Nah kali ini aku akan share pengalamanku ikut menjadi tim IT di Event Special Call ORARI Local Klaten. Berikut ini adalah sekilas kegiatanku.

B. Waktu Pelaksanaan

• 18:00 - Selesai

C. Hal Yang Disampaikan
Nah Hari ini saya menjadi logger di Event Sepecial Call ORARI Local Klaten dimana seperti yang dirapatkan dihari kemarin di Hari Kamis. Nah Di Artikel sebelumnya yang berkalian dengan ORARI aku menjelaskan bahwa aku mengunakan aplikasi untuk Logger.

Ini kau akan Menjelaskan kegiatanku hari ini, Aku hari ini sudah mempersiakan diri untuk ikut Event. Seperti yang di jadwalkan kemarin Tim IT di bagi menjadi 2 Tim dimana Tim 1 yaitu Saya Firmanysah Mukti Wijaya , Achmad Afdholul Faathin, dan Didan Layung Sena sedangkan Tim 2 Yaitu Mas Risky , Nanda Fajar Setiawan, Choirul Septiono. Nah kami datang ke masing masing station dengan transportasi dari Pak Narwanto selaku Ketua Pelaksana Event.

Nah 2 Tim in dikirim ke masing masing Station dan ternyaa saya berada di Station miliknya Pak Narwanto, Nah sesampainya disana kami di brefeing dahulu bagaimana nantinya untuk peng og annya. Lalu Event dibuka sekitar jam setengah 8 kurang. Disitu kami ngelog sampai malam kira kira sampai jam 11 Malam. Kami bertiga saat itu mengelog semua jadi dari kami banyak yang agak paham nah lalu kali diajak Pergi ke station yang ada Tim 2nya disana kami CroosCek untuk dat log apakah ada yang salah.

 Disana saya mendengarkan perbincangan untuk pengaturan event yanga kan dilanjutkan di hari esok. Nah disaat itu aku tidak sadar ternyata kami juga mendapatkan atribut Tim Event Special Call ORARI Lokal Klaten. Setelah Crosscek jadi kami langsung foto dokumentasi lalu pulang ke Station Pak Nurwanto Lagi.

D. Penutup
Sekian pengalaman yang saya lakukan selama hari ini. untuk aplikasi Loggernya akan saya jelaskan di artikel selanjutnya.

Waalaikumsalam Wr. Wb. 

Python Again > Ha l yang perlu diperhatikan di Python ? | #Part2 |Mukti911

A. Pendahuluan

Mungkin dari kalian udah ada yag baca artikel sebelumnya milik saya memang benar Python adalah bahasa pemroraman yang sangat sederhana. Setelah mempersiapkan segala perlengkapan untuk coding python dan mengetahui cara membuat program python, selanjutnya mari kita pelajari tentang aturan-aturan penulisan sintaks Python yang harus dipatuhi.

B. Latar Belakang
Python memang sangat simple tapi juga gak sesimple itu maka dari itu ada yang perlu diperhatikan di koding Pythin.

C. Maksud & Tujuan
Agar dapat mengetahui dan memahami hal yang perlu diperhatikan di Python.

D. Pembahasan
“Bagaimana kalau tidak dipathui?” Resikonya bisa terjadi error. Pada artikel ini, saya akan membahas beberapa aturan dasar penulisan sintaks Python yang harus diketahui. Agar nanti mudah dalam menulis program. Apa saja aturan-aturannya?

Penulisan Statement Python. Statement adalah sebuah intruksi atau kalimat perintah yang akan dieksekusi oleh komputer.
Contoh:

print("Hello World!")
nama = "Mukti911"

Penulisan satu statement tidak diakhiri dengan tanda titik-koma. Sedangkan, bila kita ingin menulis lebih dari satu statement dalam satu baris, maka kita harus memisahnya dengan titik-koma.
Contoh:

print("Hello"); print("World"); print("Tutorial Python untuk Pemula")
nama_depan = "Mukti"; nama_belakang = "911"

Tapi… Menurut beberapa style guide python, tidak dianjurkan menulis lebih dari satu statement dalam satu baris. Karena akan sulit dibaca.

Penulisan String pada Python. String adalah teks atau kumpulan dari karakter. String dalam pemrograman biasanya ditulis dengan dibungkus menggunakan tanda petik. Bisa menggunakan tanda petik tunggal maupun ganda.

Contoh:

judul = "Belajar Pemrograman Python sampai Bisa"
penulis = 'Mukti911'

 Atau kita juga bisa menggunakan triple tanda petik.
Contoh:

judul = """Belajar Python dengan Cepat"""
penulis = '''Mukti911'''

Penuilsan Case pada Python. Sintak Python bersifat case sensitive, artinya teksini dengna TeksIni dibedakan.
Contoh:

judul = "Belajar Dasa-dasar Python"
Judul = "Belajar Membuat Program Python"

Antara variabel judul dengan Judul itu dibedakan…
Case Style Menurut rekomendasi style guide Google, berikut ini contoh penulisan case yang disarankan:

## Snake Case digunakan pada:
module_name, package_name, method_name, function_name, , global_var_name, instance_var_name, function_parameter_name, local_var_name.
## CamelCase digunakan Pada:
ClassName, ExceptionName
## ALL CAPS digunakan Pada:
GLOBAL_CONSTANT_NAME

Penulisan Blok Program Python Blok program adalah kumpulan dari beberpaa statement yang digabungkan dalam satu blok. Penulisan blok program harus ditambahkan indentasi (tab atau spasi 2x/4x). Blok Program

Contoh yang benar:

# blok percabangan if
if username == 'petanikode':
    print("Selamat Datang Admin")
    print("Silahkan ambil tempat duduk")
# blok percabangan for
for i in range(10):
    print i

Contoh yang salah:

# blok percabangan if
if username == 'petanikode':
print("Selamat Datang Admin")
print("Silahkan ambil tempat duduk")
# blok percabangan for
for i in range(10):
print i

Ada beberapa macam blok program:

• Blok Percabangan
• Blok Perulangan
• Blok Fungsi
• Blok Class
• Blok Exception
• Blok With

E. Kesimpulan
Nah jadi tiu adalah beberapa hal yang perlu diperhatikan dalam penulisan kode Python.

F. Referensi

• -

Python Again > Apa itu Python ? | #Part1 |Mukti911

A. Pendahuluan

Nah kali ini aku kan membahas tentang Python, tapi mungkin kalian binggung apa itu Python. Nah Python ini bukan yang ular itu tapi ini bahasa pemrograman. Mungkin dari kalian banyak yang bertanya tanya. 

B. Latar Belakang
Karena Python adalah bahasa pemrograman yang populer saat ini yang code programnya samgat simple sekali.

C. Maksud & Tujuan
Agar dapat memahami dan mengimplementasian kode python untuk pembuatan aplikasi nantinya.

D. Pembahasan

Python merupakan bahasa pemrograman tingkat tinggi yang diracik oleh Guido van Rossum. Python banyak digunakan untuk membuat berbagai macam program, seperti: program CLI, Program GUI (desktop), Aplikasi Mobile, Web, IoT, Game, Program untuk Hacking, dsb. Python juga dikenal dengan bahasa pemrograman yang mudah dipelajari, karena struktur sintaknya rapi dan mudah dipahami. (Python bagus untuk pemula yang belum pernah coding)

Nah yang membuat Python banyak disukai ya karena ython memang sangat sederhana dibandingkan bahasa yang lainnya. Tidak perlu ini dan itu untuk membuat program. Bahkan tagline di websitenya menjelaskan, kalau python akan membuatmu bekerja lebih cepat dan efektif.

Jadi kenapa kita harus belajar Python ya kerena Python adalah bahasa pemrograman yang trbaik untuk orang awam sekalipun. Persiapan Alat untuk Belajar Pemrograman Python Apa saja alat-alat yang harus dipersiapkan untuk belajar pemrograman python? Python: Interpreter yang menerjemahkan bahasa python ke bahasa mesin, sehingga program bisa dijalankan. Teks Editor/IDE: Program yang digunakan untuk menulis kode. Bagaiaman cara install Python? Bagi pengguna Linux, Python tidak perlu diinstal. Karena Sebagian besar distro Linux sudah menyediakannya secara default. Untuk mengeceknya, silahkan ketik perintah python --version di terminal.

Mengenal Mode Interaktif Python, Mode interaktif merupakan fasilitas/fitur yang disediakan oleh Python sebagai tempat menulis kode secara interaktif. Fitur ini dikenal juga dengan Shell, Console, REPL (Read–Eval–Print Loop), interpreter, dsb. Cara membuka mode interaktif adalah dengan mengetik perintah python pada terminal.

Tanda >>>, artinya python siap menerima perintah. `Terdapat juga tanda ... yang berarti secondary prompt atau sub prompt, biasanya muncul saat membuat blok kode dan menulis perintah tunggal dalam beberapa baris. Mari kita coba memberikan perintah print, perintah ini berfungsi untuk mencetak teks ke layar. Cobalah tulis print "Hello World" kemudian tekan Enter.

mukti@911-X453MA:~$ python
Python 2.7.15rc1 (default, Apr 15 2018, 21:51:34)
[GCC 7.3.0] on linux2
Type "help", "copyright", "credits" or "license" for more information.
>>> print("Hello, World")
Hello, World
>>> 

Perintah yang kita tulis langsung dieksekusi dan ditampilkan hasilnya. Inilah mode interaktif, setiap kode atau perintah yang diketik akan direspon langsung oleh python. Kita bisa memanfaatkan mode interaktif ini untuk: Uji coba suatu fungsi; Eksperimen modul tertentu; Kalkulator; Mencari bantuan tentang fungsi tertentu; dll. Hal yang perlu kita coba adalah mencari bantuan tentang fungsi tertentu, karena akan membantu sekali dalam mempelajari python.

E. Kesimpulan
Python adalah bahasa pemrograman yang sangat simple dan sangat rekomendasi sekali bagi orang yang masih awam di Coding.

F. Referensi

• -

How To | Membuat System Login Dengan PHP dan MySQLi | Mukti911 | Part4

A. Pendahuluan
pada kali ini aku akan membuat sebuah artikel yaitu tentang Login System dengan PHP dan Mysqli. Nah Berikut ini adalah artikel tentang Membuat Login System dengan PHP dan Mysqli.

B. Latar Belakang
Karena untuk membangun suatu system login dengan coding web.

C. Maksud & Tujuan
Agar dapat membuat sebuah login system dengan coding web.

D. Waktu Pelaksanaan

• Tergantung Individu

E. Pembahasan

Melajutkan tutorial dihari kemarin saya akn memulainya dengan membuat laman Admin. Membuat Halaman Admin Seperti yang kalian lihat pada syntax sebelumnya. saat melakukan pengecekan, jika username dan password benar, maka halaman akan kita alihkan ke halaman admin yang berada dalam folder admin. jadi sekarang kita buat sebuah folder baru dengan nama ‘admin’.

setelah membuat folder admin, buat sebuah le baru lagi dengan nama index.php. pada index.php ini kita akan membuat halaman sederhana untuk admin. admin/index.php.

<?php
session_start();
if ($_SESSION['Status'] !=="login") {
header("Location:../index.php?info=notlogin");
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Mukti911 - Tutorial</title>
<style type="text/css">
body {
background-image: linear-gradient(to right top, #161616, #623954, #c95863, #ff9c3f, #ffff00);
min-height: 676px;
margin: 0px;
font-family: arial;
}
.all {
width: 1200px;
height: 500px;
position: relative;
top: 100px;
margin: 0 auto;
}
.img {
width: 200px;
height: 200px;
background-color: #fff;
margin: 0 auto;
border-radius: 50%;
}
.inf {
width: 1200px;
height: 300px;
padding: 20px 0px;
}
.pro {
width: 600px;
height: 150px;
background-color: #758;
margin: 0 auto;
border-radius: 10px;
}
.success {
width: 1200px;
height: 100px;
margin: 40px 0px;
}
.success h1 {
text-align: center;
font-size: 60px;
padding: 10px;
}
table {
width: 400px;
height: 150px;
padding: 30px 20px;
float: left;
}
td {
color: #fff;
}
a {
float: right;
width: 100px;
background-color: #fff;
font-size: 30px;
text-decoration: none;
text-align: center;
padding: 10px 20px;
border-radius: 10px;
position: relative;
top: 100px;
}
</style>
</head>
<body>
<div class="all">
<div class="img"></div>
<div class="inf">
<div class="pro">
<table>
<tr>
<td>Fullname</td>
<td>:</td>
<td><?php echo $_SESSION['FullName']; ?></td>
</tr>
<tr>
<td>Username</td>
<td>:</td>
<td><?php echo $_SESSION['Username']; ?></td>
</tr>
<tr>
<td>Password</td>
<td> :</td>
<td><?php echo $_SESSION['Password']; ?></td>
</tr>
<tr>
<td>Date Time Of Login</td>
<td> :</td>
<td><?php echo $_SESSION['Date']; ?></td>
</tr>
</table>
<a href="logout.php">Logout</a>
</div>
<div class="success">
<h1>Login Successfully</h1>
</div>
</div>
</div>
</body>
</html>

• Logout

<?php
session_start();
session_destroy();
header("location:../index.php?info=logout");
?>

Jika dicoba nantinya kan terlihat seperti berikut :

F. Hasil yang didapat

• Dapat membuat sebuah system login sederhana.

G. Kesimpulan
Jadi sebenarnya simple sekali cara pembuatannya untuk login system namun yan perlu diingat bagian yang penting adalah pada bagian form session databse dan kondisi.

H. Referensi

• -

How To | Membuat System Login Dengan PHP dan MySQLi | Mukti911 | Part3

A. Pendahuluan
pada kali ini aku akan membuat sebuah artikel yaitu tentang Login System dengan PHP dan Mysqli. Nah Berikut ini adalah artikel tentang Membuat Login System dengan PHP dan Mysqli.
B. Latar Belakang
Karena untuk membangun suatu system login dengan coding web.

C. Maksud & Tujuan
Agar dapat membuat sebuah login system dengan coding web.

D. Waktu Pelaksanaan

• Tergantung Individu

E. Pembahasan

Pada tutorial Part 1 dan 2 kita telah sampai pada cara membuat koneksi database nya. sekarang kita akan melanjutkannya dengan membuat halaman login sederhana untuk admin. selanjutnya akan di jelaskan secara bertahap agar lebih mudah untuk kalian pahami. buat sebuah le baru lagi dengan nama index.php.

• Untuk pembuatan index nya bisa dilihat disini. Lihat Disini

Kalian hanya perlu menambahkan kodingan seperti berikut pada file Index.php itu

• Tambahkan Kodingan di paling atas.

<?php
if(isset($_GET['info'])){
if($_GET['info'] == "failed"){
$Info =  "Login Gagal! Username Password Salah. (-_-)";
}else if($_GET['info'] == "logout"){
$info =  "Anda telah berhasil logout. (-_-)";
}else if($_GET['info'] == "notlogin"){
$info = "Anda harus login untuk mengakses halaman admin. (-_-)";
}
else {
$info = "Silahkan Login Gan !!!. (-_-)";
}
}
else {
$info = "Silahkan Login Gan !!!. (-_-)";
}
?>

• Tambahkan pada bagian body dengan ketentuan seperti berikut ini :

<body>
<div class="s">
<h1>Login System</h1>
<h4>Mukti911 - Tutorial</h4>
<h5><?php echo $info; ?></h5>
</div>
<div class="a">
<div></div>
<form method="post" action="log.php">
<input type="text" name="" placeholder="Username">
<input type="password" name=""placeholder="Password">
<button>LOGIN</button>
</form>
</div>
</body>

• Lalu tambahkan style pada h5

h5 {
font-size: 20px;
}

nah di file index.php ini kita membuat halaman login sederhana untuk admin.  kita lanjutkan lagi dengan membuat file yang akan mengelola data yang di kirim dari form login dari index.php. pada le index.php yang membuat halaman login di atas kita telah menetapkan aksi dari form ini adalah ‘log.php’ dengan method ‘post’ untuk jenis pengiriman datanya. buat sebuah le baru lagi dengan nama log.php.

<?php
session_start();
include_once 'connect.php';
$Username =  $_POST['Username'];
$Password =  $_POST['Password'];
$sql "SELECT * FROM user WHRE Username='$Username' AND Password='$Password'";
$query = mysqli_query($Connect,$sql);
$Check = mysqli_num_rows($query);
if ($cek > 0) {
$_SESSION['Username'];
$_SESSION['Info'];
header("Location:admin/index.php");
}
else {
header("Location:index.php?info=failed");
}
?>

Perhatikan baik baik pada bagian session. kita aktifkan dulu session php. karena kita menggunakan session sebagai penanda status pengguna yang akan login.  kita mengaktifkan session php dengan syntax berikut kemudian jangan lupa juga untuk menghubungkannya dengan le koneksi database yang sudah kita buat.kemudian menangkap data yang dikirim dari form login.

kemudian kita seleksi data admin yang memiliki username dan password yang sesuai dengan yang di input pada form login. selanjutnya kita hitung jumlah record yang sesuai (yang sesuai dengan username dan password yang di input).

jika data username dan password admin di temukan di tabel ‘user’, maka nilai dari variabel $Cheack adalah jumlah dari record yang di temukan. berarti variabel $cek bernilai 1 jika username dan password yang di input sesuai dengan yang ada di database. karena fungsi mysqli_num_rows() berfungsi untuk menghitung jumlah record hasil dari query yang ada dalam parameter si fungsi mysqli_num_rows() ini.

selanjutnya kita cek dengan if else jika variabel $cek lebih besar dari nol (berarti username dan password yang di input sesuai), maka kita buat session username dan session status seperti pada syntax berikut. kemudian kita alihkan ke folder admin/index.php. jika tidak maka kita alihkan halamannya kembali ke halaman login (index.php) sambil mengirimkan data pesan (?info=failed). tu sebabnya di le index.php (halaman login) kita membuat pengecekan seperti berikut (perhatikan pada le index.php)ini untuk memeriksa pesan yang di kirim. 

karena tadi jika username dan password tidak di temukan, akan dikirimkan pesan “gagal”. pada pengecekan noti kasi ini kita akan menampilkan pesan notikasi “Login gagal! username dan password salah!” jika username dan password gagal. begitu juga seterusnya dengan pesan logout dan belum_login yang akan kita buat pengalihannya sebentar lagi.

F. Hasil yang didapat

• Dapat mengetahui proses SESSION terjadi di Login System

G. Kesimpulan

Jadi element penting dari Login System Sederhana yaitu If Else / Kondisi lalu Session dan Yang apstinya Form.

H. Referensi

• -

How To | Membuat System Login Dengan PHP dan MySQLi | Mukti911 | Part2

A. Pendahuluan
pada kali ini aku akan membuat sebuah artikel yaitu tentang Login System dengan PHP dan Mysqli. Nah Berikut ini adalah artikel tentang Membuat Login System dengan PHP dan Mysqli.

B. Latar Belakang
Karena untuk membangun suatu system login dengan coding web.

C. Maksud & Tujuan
Agar dapat membuat sebuah login system dengan coding web.

D. Waktu Pelaksanaan

• Tergantung Individu

E. Pembahasan

Dalam pembuatan suatu login system mengunakan coding hml. Hal yang pertama harus di siapkan yaitu membuat suatu Tampilan Layout dengan HTML dan CSS. Nah ditutorial sebelumnya kan saya sudah membuat interface untuk Halaman Loginnya. Untuk memulai tutorial dan project membuat login dengan PHP dan MySQLi seperti di contoh ini, silahkan buat sebuah folder baru dengan nama login pada direktori localhost kalian.

• Buat sebuah database baru dengan nama loginsystem. kemudian buat sebuah tabel baru dengan nama user. isi dari tabel admin yaitu Num, Username, Password dan FullName. Dimana Num bertipe int, pilih primary dan centang auto_increment nya. Username, Password dan FullName sama-sama bertipe varchar dengan nilai sesuka kalian.

Create New Database

Create New Table in Database

Content Table

Hasil Dari Create Content Table

selanjutnya isikan data admin. untuk data contoh saja. untuk contoh akun admin yang akan login. isikan username nya ‘Mukti’, dan password nya ‘123456’ dan FullName Firmansyah Mukti Wijaya.

Insert Data

Hasil Insert Data

persiapan di database selesai.

Langkah selanjutnya dalah Membuat Konesi ke database. tujuannya agar Project PHP yang kita buat bisa terhubung dengan database.Untuk cara membuat koneksi database dengan PHP dan MySQL, saya telah membahas nya. Buat sebuah le baru dengan nama koneksi.php dan simpan pada folder login yang telah kita buat.

• koneksi.php

<?php
$servername = "localhost";
$username = "mukti911";
$password = "password";
$database = "password";
$conn = mysqli_connect($servername, $username, $password, $database);
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}
echo "Connected successfully";
?>

sampai di sini koneksi database php dan mysqli telah selesai kita buat. Selanjutnya akan kita buat halaman login sederhana untuk tempat admin memasukkan username dan password. kemudian di alihkan ke halaman admin.

H. Hasil yang didapat

• Dapat membuat sebuah koneksi ke database untuk membuat system login

I. Kesimpulan
Jadi untuk membuat sebuah System Login dibutuhkan sebuah database untuk user yang akan login lalu membuat sebuah jalur koneksi ke database.

J. Referensi

• -

How To | Membuat Interface System Login Dengan HTML dan CSS | Mukti911 | Part1

A. Pendahuluan
pada kali ini aku akan membuat sebuah artikel yaitu tentang membuat sebuah tampilan untuk Login System. Nah nantinya diharapkan Interface ini dapat digunakan Sebagai Interface Login System yang akan dibangun dengan PHP dan Mysqli. Nah Berikut ini adalah artikel tentang cara membuat Interface Login System.

B. Latar Belakang
Karena suatu system login membutuhkan antarmuka untuk User dan System.

C. Maksud & Tujuan
Agar nantinya Interface ini dapat menjadi Penghubung antara System Login dan User.

D. Waktu Pelaksanaan

• Tergantung Individu.

E. Pembahasan

Dalam pembuatan suatu login system mengunakan coding. Hal yang pertama harus di siapkan yaitu membuat suatu Tampilan Layout dengan HTML dan CSS. Nah berikut ini adalah contoh Cara pembuatan Antarmukanya.

Pertama buat file baru dengan nama index.html. Lalu tulis kan Coding Seperti berikut :

<!DOCTYPE html>
<html>
<head>
<title>Mukti911 - Tutorial</title>
<style type="text/css">
body {
background-image: linear-gradient(to right top, #00ff37, #00e1b6, #00baff, #0087ff, #2100ff);
min-height: 675px;
margin: 0px;
}
div.s {
width: 800px;
height: 200px;
float: left;
position: relative;
top: 100px;
left: 100px;
padding: 150px 0px;
}
div.a {
position: relative;
border-radius: 20px;
top: 100px;
float: right;
right: 100px;
width: 300px;
height: 500px;
background-color: #000000aa;
}
div.a div {
width: 150px;
height: 150px;
background-color: #fff;
margin: 70px auto 0px auto;
border-radius: 50%;
}
h1 {
font-size: 120px;
font-family: arial;
margin: 0px;
}
h4 {
font-size: 50px;
font-family: arial;
margin: 0px;
}
form {
width: 250px;
margin: 20px 25px 100px 25px;
height: auto;
}
form input[type=text], form input[type=password]{
width: 200px;
padding:20px 25px;
background-color: transparent;
border: none;
text-align: center;
font-size: 20px;
color: #fff;
}
button {
width: 250px;
border-radius: 10px;
color: #000;
padding:20px 25px;
margin: 0px auto;
background-color: #fff;
border: none;
text-align: center;
font-size: 20px;
font-family: arial;
}
</style>
</head>
<body>
<div class="s">
<h1>Login System</h1>
<h4>Mukti911 - Tutorial</h4>
</div>
<div class="a">
<div></div>
<form>
<input type="text" name="" placeholder="Username">
<input type="password" name=""placeholder="Password">
<button>LOGIN</button>
</form>
</div>
</body>
</html>

Codingan Tersebut akan menghasilkan tampilan seperti berikut :

Nah berikut ini adalah penjelasannya :

<!DOCTYPE html>
<html>
<head>
<title>Mukti911 - Tutorial</title>
</head>
<body>
<div class="s">
<h1>Login System</h1>
<h4>Mukti911 - Tutorial</h4>
</div>
<div class="a">
<div></div>
<form>
<input type="text" name="" placeholder="Username">
<input type="password" name=""placeholder="Password">
<button>LOGIN</button>
</form>
</div>
</body>
</html>

Pada bagian codingan diatas Seperti yang terlihat Codingan ini mengunakan HTML. Berikut adalah penjelasan tag tag nya dan atributnya :

• <html> untuk memulai membuat codingan HTML.
• <title> untuk menambahkan informasi nama dari Halaman File Jika File ini nantinya akan dibuka di Browser.
• <head> untuk mendefinisikan beberapa informasi kepala yang ada di halaman ini.
• <body> adalah tempat untuk menaruh suatu tatanan Layout dari Login System Tadi.
• <div> adalah suatu tag yang tidak memiliki style default namun div dapat diberi style dengan atribut dan CSS.
• <h1> dan <h4> adalah tag yang digunakan untuk header.
• <form> form adalah suatu tag yang dimana untuk merepresentasikan sebuah form isian.
• <input> digunakan untuk membuat kolom isian di form.
• <button> digunakan untuk membuat sebuah tombol.

Lalu untuk Codingan yang Bagian ini untuk menampung style style untuk Halaman :

<style type="text/css">
body {
background-image: linear-gradient(to right top, #00ff37, #00e1b6, #00baff, #0087ff, #2100ff);
min-height: 675px;
margin: 0px;
}
div.s {
width: 800px;
height: 200px;
float: left;
position: relative;
top: 100px;
left: 100px;
padding: 150px 0px;
}
div.a {
position: relative;
border-radius: 20px;
top: 100px;
float: right;
right: 100px;
width: 300px;
height: 500px;
background-color: #000000aa;
}
div.a div {
width: 150px;
height: 150px;
background-color: #fff;
margin: 70px auto 0px auto;
border-radius: 50%;
}
h1 {
font-size: 120px;
font-family: arial;
margin: 0px;
}
h4 {
font-size: 50px;
font-family: arial;
margin: 0px;
}
form {
width: 250px;
margin: 20px 25px 100px 25px;
height: auto;
}
form input[type=text], form input[type=password]{
width: 200px;
padding:20px 25px;
background-color: transparent;
border: none;
text-align: center;
font-size: 20px;
color: #fff;
}
button {
width: 250px;
border-radius: 10px;
color: #000;
padding:20px 25px;
margin: 0px auto;
background-color: #fff;
border: none;
text-align: center;
font-size: 20px;
font-family: arial;
}
</style>

Nah kodingan diatas adalah kodingan yang mengubah tampilan yang sebelumnya flat di HTML menjadi lebih baik. Nah berikut ini adalah beberapa penjelasannya :

• background-image: linear-gradient(to right top, #00ff37, #00e1b6, #00baff, #0087ff, #2100ff);. Codigan ini digunakan untuk menambahkan backgrountd pada tag yang ada.
• width dan height digunakan untuk memberikan ukuran panjang dan lebar.
• margin dan padding : digunakan untuk memberikan jarak content dari luar dan dalam.
• float yaitu untuk membuat sebuah perataan dari tag yang diberi kodingan ini.
• position yaitu digunakan untuk mengatur posisi dari tag.
• top, bottom, left, right digunakan untuk memindahkan tag dari beberapa sisi tersebut.
• border-radius digunakan untuk mengatur sudut dari tag.
• font-size mengatur unturan font
• font-family mengatur bentuk dari tulisan
• text-align untuk mengatur perataan text.

Nah berikut adalah contoh pembuatan Interface Login System.

 

I. Kesimpulan

• Interface Login Juga tetap bisa dibuat menarik meskipun hanya dengan HTML CSS

J. Referensi

• -