Tampilkan postingan dengan label Pemrograman Web. Tampilkan semua postingan
Tampilkan postingan dengan label Pemrograman Web. Tampilkan semua postingan

1.10.23

Pemrograman HTML

Pemrograman HTML

Belajar Pemrograman HTML



Apa Itu Pemrograman HTML?

Pemrograman HTML adalah keterampilan yang penting jika Anda ingin membuat dan mengembangkan situs web. Dari dasar hingga mahir, berikut adalah langkah-langkah yang bisa Anda ikuti untuk menguasai pemrograman HTML:

Tingkat Dasar:

  1. Memahami Konsep Dasar HTML: HTML adalah bahasa markup yang digunakan untuk membuat struktur dasar halaman web. Pelajari tag, elemen, atribut, dan hierarki dasar HTML.
  2. Membuat Dokumen HTML Sederhana: Mulailah dengan membuat dokumen HTML sederhana menggunakan teks editor seperti Notepad atau Visual Studio Code. Gunakan tag dasar seperti <html>, <head>, dan <body>.
  3. Menambahkan Judul dan Paragraf:Pelajari cara menambahkan judul ke halaman menggunakan tag <title>. Gunakan tag <p> untuk menambahkan paragraf ke dalam dokumen Anda.
  4. Menambahkan Tautan (Link):Gunakan tag <a> untuk membuat tautan (link) ke halaman web lain atau berkas lainnya.
  5. Menyisipkan Gambar:Pelajari cara menyisipkan gambar ke halaman HTML menggunakan tag <img>.

Tingkat Menengah:

  1. Menggunakan Tag Semantik: Pelajari tag semantik seperti <header>, <nav>, <article>, <section>, <footer>, dll., untuk memberikan struktur yang lebih bermakna ke halaman Anda.
  2. Menggunakan Daftar (List):Pelajari penggunaan tag <ul>, <ol>, dan <li> untuk membuat daftar tak berurutan (unordered list) dan daftar berurutan (ordered list).
  3. Menggunakan Formulir:Pelajari cara membuat formulir dengan tag seperti <form>, <input>, <textarea>, dan <button>.
  4. Menggabungkan CSS (Cascading Style Sheets):Memahami konsep dasar CSS untuk mengubah tampilan halaman web Anda, seperti warna, font, dan tata letak.

Tingkat Mahir:

  1. Menggunakan CSS Lanjutan:Pelajari tentang selektor, cascading, dan warisan dalam CSS. Praktekkan CSS grid, flexbox, dan media queries untuk mengatur tata letak responsif.
  2. Menggunakan JavaScript:Pelajari dasar-dasar JavaScript untuk menambahkan interaktivitas ke situs web Anda.
  3. Memahami Aksesibilitas Web:Pelajari tentang praktik-praktik terbaik untuk membuat situs web yang dapat diakses oleh semua orang, termasuk mereka yang memiliki disabilitas.
  4. Mengoptimalkan Kinerja Web:Pelajari teknik-teknik untuk mengoptimalkan kinerja halaman web Anda, seperti mengurangi waktu muat dan mengompres gambar.
  5. Belajar Framework Front-End (Opsional):Jika Anda ingin menjadi seorang pengembang web profesional, pertimbangkan untuk mempelajari framework front-end seperti React, Vue.js, atau Angular.
  6. Mengikuti Berita dan Perkembangan Terbaru:Selalu terus belajar dan mengikuti perkembangan terbaru dalam pemrograman web, seperti HTML5, CSS3, dan standar baru dalam web development.
Ingatlah bahwa pemrograman HTML adalah bagian dari dunia yang lebih besar dalam pengembangan web. Jadi, pastikan untuk terus mengembangkan keterampilan Anda dengan mempraktekkan apa yang Anda pelajari dan menjelajahi topik terkait seperti CSS, JavaScript, dan pengoptimalan web.
Pengen Bisa Pemrograman PHP harus belajar apa dulu?

Pengen Bisa Pemrograman PHP harus belajar apa dulu?

Pengen Bisa Pemrograman PHP harus belajar apa dulu?



Beberapa ide dan teknologi mendasar sebenarnya dapat membantu Anda memahami dan menggunakan PHP secara efektif sebelum Anda mulai mempelajarinya. Sebelum mempelajari PHP, disarankan agar Anda memahami hal-hal berikut:
  1. Halaman web pada dasarnya dibuat menggunakan bahasa markup HTML, sedangkan gaya dan tampilan halaman diatur menggunakan kerangka CSS. Langkah awal yang penting dalam pengembangan web adalah memahami HTML dan CSS.
  2. Saat menggunakan PHP atau bahasa pemrograman lainnya, penting untuk memahami konsep dasar pemrograman seperti variabel, tipe data, struktur kontrol (if-else, loop), dan fungsi. Jika Anda tidak memiliki pengalaman pemrograman sebelumnya, Anda bisa memulai dengan bahasa dasar seperti Python atau JavaScript.
  3. Anda akan berinteraksi secara rutin dengan database saat bekerja dengan aplikasi online yang lebih rumit. Untuk mengambil, menyisipkan, memperbarui, dan menghapus data dari database, kenali SQL (Structured Query Language). Database yang mudah digunakan seperti MySQL atau SQLite adalah awal yang baik.
  4. Anda harus memahami cara kerja protokol HTTP (Hypertext Transfer Protocol) dan cara kerja komunikasi browser dan server. Memahami metode HTTP seperti GET dan POST adalah bagian dari ini.
  5. Pelajari tentang ide-ide seperti URL, kode status HTTP, cookie, sesi, dan keamanan web dasar. Ini akan membantu Anda membuat aplikasi online yang efektif dan aman.
  6. Untuk menguji dan mengembangkan aplikasi PHP, Anda harus memahami cara menyiapkan dan mengelola server web lokal di komputer Anda. XAMPP atau WAMP adalah dua opsi yang sering digunakan untuk lingkungan pengembangan lokal.
  7. Untuk menulis dan mengelola kode PHP, Anda memerlukan alat. Pilih Lingkungan Pengembangan Terpadu (IDE) atau editor teks berdasarkan preferensi Anda. IDE populer untuk PHP termasuk NetBeans, PHPStorm, dan Visual Studio Code.
  8. Jika Anda ingin bekerja dengan tim atau melacak perubahan dalam kode Anda, mempelajari tentang Git dan GitHub atau GitLab sangatlah penting.
Anda akan lebih siap untuk mulai belajar PHP jika Anda benar-benar memahami ide-ide ini. Memiliki pemahaman yang kuat tentang dasar-dasar pengembangan web dapat membantu Anda menggunakan PHP dalam proyek Anda secara efisien karena ini adalah bahasa pemrograman sisi server yang ampuh.

12.9.23

Membuat Halaman Login Aplikasi Website Pembayaran SPP

Membuat Halaman Login Aplikasi Website Pembayaran SPP

Membuat Halaman Login Aplikasi Pembayaran SPP Bebasis Web 



Halaman Login Siswa :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Siswa | Aplikasi Pembayaran My SPP</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
        <div class="row justify-content-md-center">
            <div class="col-md-4">
                <h4 class="text-center">Login Siswa</h4>
                <div class="card">
                    <div class="card-header">
                    <img src="logo.png" width="100%">
                    </div>
                    <div class="card-body">
                        <form action="proses-login-siswa.php" method="post">
                            <div class="form-group mb-2">
                                <label>NISN</label>
                                <input type="number" name="nisn"
                                class="form-control"
                                placeholder="Masukan Nomor NISN" placeholder>
                            </div>
                            <div class="form-group mb-2">
                                <label>NIS</label>
                                <input type="number" name="nis"
                                class="form-control" placeholder="Masukan nomor NIS"
                                placeholder>
                            </div>
                            <div class="form-group mb-2">
                                <button type="submit" class="btn btn-primary">Login
                                </button>
                            </div>
                            <a href="index2.php">Login Sebagai Admin / Petugas</a>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>

Hasil Tampilan Login Siswa:

Halaman Login Petugas :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Admin / Petugas | Aplikasi Pembayaran My SPP</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <div class="row justify-content-md-center">
            <div class="col-md-4">
                <h4 class="text-center">Login Admin / Petugas</h4>
                <div class="card">
                    <div class="card-header">
                        <img src="logo.png" width="100%">
                    </div>
                    <div class="card-body">
                        <form action="proses-login-petugas.php" method="post">
                            <div class="form-group mb-2">
                                <label>Username</label>
                                <input type="text" name="username"
                                class="form-control" placeholder="Masukan Username"
                                placeholder>
                            </div>
                            <div class="form-group mb-2">
                                <label>Password</label>
                                <input type="password" name="password"
                                class="form-control" placeholder="Masukan Password"
                                placeholder>
                            </div>
                            <div class="form-group mb-2">
                                <button type="submit" class="btn btn-primary">Login
                                </button>
                            </div>
                            <a href="index.php">Login Sebagai Siswa</a>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

<script src="js/bootstrap.bundle.min.js"></script>    
</body>
</html>

Hasil Tampilan Login Admin/Petugas:

Halaman  Dashboard Admin :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin | Aplikasi Pembayaran My SPP</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">

        <h3>Aplikasi Myspp</h3>
        <div class="alert alert-info">
            Anda Login Sebagai <b>Administrator</b> Aplikasi Myspp
        </div>
        <a href="admin.php" class="btn btn-primary">Administrator</a>
        <a href="admin.php?url=spp" class="btn btn-primary">SPP</a>
        <a href="admin.php?url=kelas" class="btn btn-primary">Kelas</a>
        <a href="admin.php?url=siswa" class="btn btn-primary">Siswa</a>
        <a href="admin.php?url=petugas" class="btn btn-primary">Petugas</a>
        <a href="admin.php?url=pembayaran" class="btn btn-primary">Pembayaran</a>
        <a href="admin.php?url=laporan" class="btn btn-primary">Laporan</a>
        <a href="admin.php?url=logout" class="btn btn-primary">Logout</a>

        <div class="card mt-2">
            <div class="card-body">
                <!-- ini isi web kita -->
                <?php
                $file = @$_GET['url'];
                if(empty($file)){
                    echo"<h4>Selamat Datang Di Halaman Administrator.</h4>";
                    echo"Aplikasi Myspp digunakan untuk mempermudah proses
                    pembarayan siswa disekolah.";
                }else{
                    include $file.'.php';
                }
                ?>
            </div>
        </div>
    </div>

<script src="../js/bootstrap.bundle.min.js"></script>    
</body>
</html>
Hasil Tampilan Dashboard Admin/Petugas :

Tambahkan Perintah php di di halaman admin untuk hak aksess
<?php
session_start();
if(empty($_SESSION['id_petugas'])){
    echo"<script>
    alert('Maaf Anda Belum Login');
    windows.location.assign('../index2.php');
    </script>";
}
if($_SESSION['level']!='admin'){
    echo"<script>
    alert('Maaf Anda Bukan Sesi Admin');
    windows.location.assign('../index2.php');
    </script>";
}
?>

Perintah koneksi database :
<?php

$koneksi = mysqli_connect('localhost','root','','myspp');

if(!$koneksi){
    echo"Koneksi Anda Gagal";
}

Halaman Proses  Login admin Petugas :
<?php

$username = $_POST['username'];
$password = $_POST['password'];

include 'koneksi.php';
$sql = "SELECT*FROM petugas WHERE username='$username' AND password='$password'";
$query = mysqli_query($koneksi, $sql);
if(mysqli_num_rows($query)>0){
    $data = mysqli_fetch_array($query);
    session_start();
    $_SESSION['id_petugas'] = $data['id_petugas'];
    $_SESSION['nama_petugas'] = $data['nama_petugas'];
    $_SESSION['level'] = $data['level'];
    if($data['level']=='admin'){
        header('Location:admin/admin.php');
    }elseif($data['level']=='petugas'){
        header('Location:admin/petugas.php');
    }
}else{
    echo"<script>
    alert('Maaf Login Gagal, Silahkan Ulangi Lagi');
    windows.location.assign('index2.php');
    </script>";
}

Perintah Logout :
<?php
session_start();
session_destroy();
header("Location:../index2.php");

?>


11.9.23

Membuat Database Aplikasi Website Pembayaran SPP

Membuat Database Aplikasi Website Pembayaran SPP

Membuat Database 

Aplikasi Website Pembayaran SPP 

Sebelum membuat database kalian siapkan terlebih dahulu alat/aplikasi pedukung untuk membuat database disini saya menggunakan xampp, apabila belum memiliki aplikasi xampp di komputer kalian silahkan download terlebih dahulu disini dan install di komputer kalian.

Langkah pertama buka aplikasi xampp dan jalankan aplikasi nya.


Buatlah nama database "db_spp"


Kemudian pilih database yang kita buat.


1. Pilih nama database yang kita buat

2. Pilih menu sql

3. Salin / ketikan scrip kode membuat table siswa di sql dibawah ini: 

CREATE TABLE `siswa` (
  `nisn` char(10) NOT NULL,
  `nis` char(8) NOT NULL,
  `nama` varchar(35) NOT NULL,
  `id_kelas` int(11) NOT NULL,
  `alamat` text NOT NULL,
  `no_telp` varchar(13) NOT NULL,
  `id_spp` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci; 

4. Pilih kirim

 


Ulangi langkah diatas untuk membuat tabel sesuai soal membuat tabel dabate db_spp seperti :

Salin / ketikan scrip kode membuat table spp di sql dibawah ini: 

CREATE TABLE `spp` (
  `id_spp` int(11) NOT NULL,
  `tahun` int(11) NOT NULL,
  `nominal` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

Salin / ketikan scrip kode membuat table kelas di sql dibawah ini: 

CCREATE TABLE `kelas` (
  `id_kelas` int(11) NOT NULL,
  `nama_kelas` varchar(10) NOT NULL,
  `kompetensi_keahlian` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

Salin / ketikan scrip kode membuat table pembayaran di sql dibawah ini: 

CREATE TABLE `pembayaran` (
  `id_pembayaran` int(11) NOT NULL,
  `id_petugas` int(11) NOT NULL,
  `nisn` varchar(10) NOT NULL,
  `tgl_bayar` int(11) NOT NULL,
  `bulan_dibayar` varchar(8) NOT NULL,
  `tahun_dibayar` int(11) NOT NULL,
  `id_spp` int(11) NOT NULL,
  `jumlah_bayar` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

Salin / ketikan scrip kode membuat table petugas di sql dibawah ini: 

CREATE TABLE `petugas` (
  `id_petugas` int(11) NOT NULL,
  `username` varchar(25) NOT NULL,
  `password` varchar(32) NOT NULL,
  `nama_petugas` varchar(35) NOT NULL,
  `level` enum('admin','petugas') NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

Lebih jelasnya lihat video di bawah ini. 





15.8.23

13 Konsep dasar web mengacu pada prinsip-prinsip fundamental

13 Konsep dasar web mengacu pada prinsip-prinsip fundamental

Konsep dasar web mengacu pada prinsip-prinsip fundamental yang membentuk dasar dari World Wide Web. Berikut adalah beberapa konsep dasar yang penting dalam konteks web: 

https://www.pexels.com/
  1. Internet: Internet adalah jaringan global yang menghubungkan jutaan komputer dan perangkat di seluruh dunia. Ini adalah dasar dari semua layanan online, termasuk web.
  2. World Wide Web (WWW): World Wide Web adalah salah satu layanan yang berjalan di atas internet. Ini adalah kumpulan dokumen yang saling terhubung dan diakses melalui browser web. Dokumen-dokumen ini dapat berisi teks, gambar, video, dan tautan. 
  3. URL (Uniform Resource Locator): URL adalah alamat yang digunakan untuk mengidentifikasi sumber daya yang ada di web, seperti halaman web, gambar, atau file lainnya. URL terdiri dari protokol (seperti "http" atau "https"), nama domain, dan jalur ke sumber daya tersebut. 
  4. HTML (Hypertext Markup Language): HTML adalah bahasa markah yang digunakan untuk membuat struktur dan konten dasar dari halaman web. Ini menggunakan elemen dan tag untuk memformat teks, menambahkan gambar, membuat tautan, dan lainnya. 
  5. HTTP (Hypertext Transfer Protocol): HTTP adalah protokol komunikasi yang digunakan untuk mentransfer data antara browser dan server web. Ini mengatur cara permintaan dan respons diproses di web. 
  6. Browser Web: Browser adalah perangkat lunak yang digunakan untuk mengakses halaman web. Contoh browser termasuk Google Chrome, Mozilla Firefox, Microsoft Edge, dan lainnya. 
  7. Server Web: Server web adalah komputer yang menyimpan dan menyajikan halaman web kepada pengguna. Ketika Anda memasukkan URL di browser, permintaan dikirim ke server web yang kemudian merespons dengan mengirimkan halaman yang diminta.
  8. Halaman Web: Halaman web adalah dokumen individual di web. Ini bisa berisi teks, gambar, video, dan elemen interaktif lainnya. Halaman web sering kali saling terhubung melalui tautan.
  9. Tautan (Link): Tautan adalah elemen yang memungkinkan pengguna untuk berpindah dari satu halaman web ke halaman web lain atau ke sumber daya lainnya. Tautan dapat digambarkan sebagai teks atau elemen yang dapat di-klik.
  10. Server dan Klien: Dalam konteks web, server adalah komputer yang menyediakan sumber daya, sedangkan klien adalah perangkat yang meminta dan menerima sumber daya tersebut. Browser adalah contoh klien yang meminta halaman web dari server. 
  11. Dinamika Web: Selain halaman statis, web juga dapat memiliki komponen dinamis yang dibangun menggunakan bahasa pemrograman seperti JavaScript. Ini memungkinkan interaksi pengguna, animasi, dan konten yang diperbarui secara dinamis tanpa harus memuat ulang seluruh halaman.
  12. Responsif dan Desain Adaptif: Konsep ini menunjukkan pentingnya membuat situs web yang dapat menyesuaikan diri dengan berbagai ukuran layar, mulai dari perangkat desktop hingga ponsel pintar.
  13. SEO (Search Engine Optimization): SEO adalah rangkaian praktik untuk meningkatkan visibilitas halaman web di mesin pencari, seperti Google. Ini melibatkan pengoptimalan konten dan struktur situs untuk peringkat yang lebih baik dalam hasil pencarian. 
Ini hanya beberapa konsep dasar dalam dunia web. Pengertian lebih mendalam tentang aspek-aspek ini akan membantu Anda memahami cara kerja web secara lebih komprehensif.

Ads 970x90