Membuat Login dengan menggunakan PHP dan Mysql

Assalamualaikum wr...wb..

Melanjutkan postingan sebelumnya, sekarang kita akan membuat login sederhana dengan menggunakan PHP dan Mysql.

kita akan membuat tampilan login seperti ini dengan menggunakan boostrap

Pertama, kita membuat database untuk login yang akan kita buat

Selanjutnya kita membuat script php untuk login agar data bisa diambil dr database

Selanjutnya kita membuat file koneksinya dgn mysql

Berikutnya kita membuat script PHP agar data bisa diambil dari database

Sekarang kita coba masukkan username dan password

Berikut tampilan jika login sukses

Demikian tutioal ini... semoga bermanfaat.

Cara Koneksi PHP ke Database MySQL

Assalamualaikum

Melanjutkan postingan yang kemarin, saya akan lanjutkan cara koneksi dari program PHP yang kita buat ke Database MySQL.

Langkah pertama yang harus kita lakukan setelah masuk ke MySQL yaitu membuat database yang akan kita koneksikan ke PHP. 

Setelah database kita buat selanjutkan kita akan mengkoneksikannya dengan PHP.

untuk melakukan koneksi SQL kita gunakan perintah sbb :

$conn = new mysqli($severname,$username, $password, $dbname);

dimana 

$severname = "localhost";

$username = "root";

$password = "";

$dbname = "praktikum";(nama database kita)

Selanjutnya, untuk memastikan apakah koneksi kita sukses, kita masukkan kondisi, dimana jika terkoneksi akan muncul "Koneksi Sukses"

Dibawah ini kode PHP lengkapnya 

Jika Koneksi sukses, akan muncul seperti dibawah ini :

Diartikel selanjutnya, saya akan mencoba membuat login sederhana dengan menggunakan PHP dan MySQL.

Semoga Bermanfaat.

Cara Membuat Web Sederhana

Postingan sebelumnya saya sudah memberikan tutorial cara menggunakan framework bootstrap.

kali ini saya akan membuat website sederhana dengan menggunakan bootstrap

pertama kita membuat file index.html pada text editor kita. 

kita akan membuat navigation bar nya.

Kelebihan bootstrap, kita sudah disiapkan coding untuk membuat beberapa contoh tampilan

ada beberapa pilihan tampilan nav bar, silahkan pilih dan copy coding ke text editor

selanjutnya kita akan memuat tampilan muka dari web kita, silahkan pilih di bootstrap, tampilan sesuai keinganan kemudian copy coding ke text editor. saya menggunakan fluid jumbotron

begini hasil tampilannya

selanjutnya kita akan membuat content dari website, kita bisa melihat pilihan tampilannya di website bootstrap/documentation/cards

berikut coding yang saya copy daro bootstrap

Begini tampilan nya

Demikian semoga bermanfaat

Langkah Langkah Penggunaan Framework Bootstrap dan Jquery

Bootstrap merupakan framework untuk membangun desain web secara responsif. Artinya, tampilan web yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari browser yang kita gunakan baik di desktop, tablet ataupun mobile device. Fitur ini bisa diaktifkan ataupun dinon-aktifkan sesuai dengan keinginan kita sendiri.
Bootstrap mengedapankan tampilan untuk mobile device (Handphone, smartphone dll.) guna mempercepat dan mempermudah pengembangan website. Bootstrap menyediakan HTML, CSS dan Javascript siap pakai dan mudah untuk dikembangkan.

Berikut langkah langkah menggunakan bootstrap dan jquery :

1. Buat sebuah direktori baru.

2. Setelah itu Download Bootstrap di https://getbootstrap.com/docs/4.1/getting-started/download/

3. Setelah file terdownload, kamu akan mendapatkan file zip. Buat folder baru dengan nama Praktikum di Folder xampp/htdocs. selanjutnya ekstrak file zip ke dalam folder praktikum. 

4. Didalam folder praktikum, akan ada folder asset 

5. Selanjutnya buka text editor, saya menggunakan sublime text. save link dibawah ini :

     1, https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css (save di folder css).

     2. https://code.jquery.com/jquery-3.3.1.slim.min.js (save di folder js).

     3. https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js (save di folder js).

     4. https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js (save di folder js).

6. Setelah selesai menyimpan semua link. sekarang framework bootstrap sudah bisa digunakan.

Demikian sedikit penjelasan mengenai bootstrap dan jquery. Semoga bermanfaat.

Penggunaan Tag HTML Sederhana

Setelah kita mengetahui struktur dari HTML selanjutnya kita akan membuat beberapa program sederhana dengan menggunakan elemen tag yang ada pada HTML.
HTML memiliki banyak elemen tag yang bisa digunakan. Kali ini saya akan memberikan contoh penggunaan tag HTML yang biasa digunakan

Image Tag < img >

img menunjukkan image yang berarti gambar dan oleh karenanya digunakan untuk menyisipkan gambar. Gambar didalam sebuah dokumen HTML tidak dimasukkan sepenuhnya pada file (.html, misalnya) akan tetapi, hanya merujukkan file sumber gambar tersebut berada (disimpan).
Contoh Script HTML nya sebagai Berikut :

Tampilan yang muncul seperti ini

Elemen Tag < ol >

 

Membuat daftar terurut yang selalu diawali dengan huruf dan angka

Contoh Script nya seperti dibawah ini:

Tampilan dari script HTML Tag

Tag Elemen < table > < tr > dan < td >

Jumlah baris tabel ditentukan dengan banyaknya < tr >
Jumlah kolom dalam tabel ditentukan dengan banyaknya < td >

Contoh pada Script HTML dibawah ini :

Hasil Tampilan elemen tabel seperti gambar di bawah ini

Demikian beberapa contoh penggunaan tag di HTML. Semoga bermanfaat.

Belajar HTML - Penggunaan Tag HTML

Siapapun bisa belajar bagaimana caranya membuat website, yaitu diawali dengan mempelajari HTML terlebih dahulu sebagai pondasinya.

Hal yang pertama dibutuhkan untuk mempelajari HTML tentunya adalah sebuah browser, kita dapat menggunakan berbagai jenis browser yang biasa digunakan, seperti Mozilla, Chrome, dll. Aplikasi lain yang dibutuhkan untuk belajar HTML adalah Text Editor, ada banyak text editor yang bisa digunakan yaitu Notepad++, Pico, Sublime Text, dll. Disini saya akan menggunakan Sublime Text sebagai text editornya.

Jadi untuk mempelajari HTML kita hanya memerlukan sebuah browser dan text editor saja.

HTML adalah sebuah bahasa markup standar singkatan dari Hyper Text Markup Language. Dengan HTML memungkinakan kita untuk menampilkan informasi di internet. Browser akan menampilkan code HTML. Melalui tutorial ini kita akan membuat struktur HTML,HTML adalah bagian penting untuk membuat website dan mudah dipelajari.

Memahami Tag dan Element

TAG sederhananya adalah kode-kode tertentu yang menjadi pengenal bahwa kode tersebut adalah HTML dan bisa diterjemahkan oleh browser dengan tampilan tertentu. 
Tag adalah suatu penanda untuk menandai elemen-elemen dalam suatu dokumen HTML dan Fungsi Tag adalah untuk memberikan instruksi atau memberitahu kepada browser bagaimana suatu objek di tampilkan berdasarkan Tag yang di gunakan, objek disini bisa berupa teks, video, audio dan gambar.

Misalnya  untuk membuat sebuah tulisan tebal, maka kita bisa menggunakan TAG STRONG, atau TAG B. Untuk membuat paragraf kita bisa menggunakan TAG P. Dan masih banyak TAG HTML lainnya, tentunya dengan fungsi yang berbeda-beda. Untuk menuliskan TAG HTML kita bisa menggunakan huruf kecil ataupun kapital, bebas-bebas saja, browser sudah mengenalinya.

Element pada HTML membentuk sebuah struktur dan memberitahu browser untuk halaman website yang akan ditampilkan. Biasanya untuk element terdiri dari tag pembuka, konten, dan tag penutup.

Struktur Dasar HTML

\

Tag sendiri digunakan untuk menandai sebuah element pada bagian awal dan akhir, dengan format yang sama diawali dengan tanda < dan ditutup dengan />.

Jika dibedakan, untuk tag terdapat dua jenis, yaitu tag pembuka  dan tag penutup . Dua jenis tag ini hanya dibedakan dengan tanda garis miring.

html = Pembuka dan Penutupl setiap membuka suatu dokumen HTML

title = Tag Pembuka dan penutup untuk judul halaman/dokumen HTML

Body = Tag awal dan akhir dari apa yang diisikan pada dokumen HTML

Heading

Digunakan untuk merestrukturisasi sebuah dokumen HTML

.

Untuk membuat sebuah heading atau subjudul, digunakan element h1, h2, h3, h4, h5, atau h6. Dimana kepanjangan h adalah heading. Untuk ukuran paling besar diawali dengan h1 sampai h6 adalah ukuran terkecil.

Berikut adalah codenya:

Untuk tampilan di browser akan terlihat seperti gambar di bawah:

.

Itulah sedikit pengenalan mengenai Tag HTML