Selasa, 27 Januari 2026

halaman spmb.php

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Pendaftaran Siswa Baru | SMK DIGITAL</title>
  <style>
    * {
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, sans-serif;
    }

    body {
      margin: 0;
      background: #f4f6f9;
      color: #333;
    }

    header {
      background: linear-gradient(135deg, #0d47a1, #1976d2);
      color: white;
      padding: 15px 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .logo-box {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .logo img {
      width: 55px;
      height: auto;
    }

    nav a {
      color: white;
      text-decoration: none;
      margin: 0 12px;
      font-weight: 500;
    }

    nav a:hover {
      text-decoration: underline;
    }

    .hero {
      background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
                  url("https://images.unsplash.com/photo-1588072432836-e10032774350") center/cover no-repeat;
      color: white;
      padding: 80px 20px;
      text-align: center;
    }

    .hero h1 {
      font-size: 38px;
      margin-bottom: 10px;
    }

    .hero p {
      font-size: 18px;
      margin-bottom: 25px;
    }

    section {
      padding: 50px 20px;
      max-width: 1100px;
      margin: auto;
    }

    section h2 {
      text-align: center;
      margin-bottom: 30px;
      color: #0d47a1;
    }

    /* INFO BOX */
    .info-box {
      background: #e3f2fd;
      padding: 25px;
      border-radius: 12px;
      margin-bottom: 40px;
      line-height: 1.7;
    }

    .info-box ul {
      padding-left: 18px;
    }

    /* FORM */
    .form-container {
      background: white;
      padding: 35px 25px;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      max-width: 900px;
      margin: auto;
    }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 18px;
    }

    .form-group {
      display: flex;
      flex-direction: column;
    }

    .form-group label {
      font-weight: 600;
      margin-bottom: 6px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
      padding: 10px;
      border-radius: 6px;
      border: 1px solid #ccc;
      font-size: 14px;
    }

    .form-group textarea {
      resize: vertical;
      min-height: 80px;
    }

    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
      outline: none;
      border-color: #1976d2;
    }

    .form-full {
      grid-column: 1 / -1;
    }

    .btn-submit {
      background: #1976d2;
      color: white;
      border: none;
      padding: 12px 20px;
      border-radius: 6px;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
      transition: 0.3s;
      width: 100%;
      margin-top: 15px;
    }

    .btn-submit:hover {
      background: #0d47a1;
    }

    footer {
      background: #0d47a1;
      color: white;
      text-align: center;
      padding: 15px;
      margin-top: 50px;
      font-size: 14px;
    }

    @media (max-width: 600px) {
      .hero h1 {
        font-size: 30px;
      }
    }
  </style>
</head>
<body>

  <!-- HEADER -->
  <header>
    <div class="logo-box">
      <div class="logo"><img src="img/logo.png" alt="Logo SMK DIGITAL"></div>
      <div>
        <strong>SMK DIGITAL</strong><br>
        <small>Sekolah Teknologi Masa Depan</small>
      </div>
    </div>
    <nav>
      <a href="index.php">Beranda</a>
      <a href="login.php">Masuk</a>
      <a href="spmb.php">SPMB</a>
      <a href="#kontak">Kontak</a>
    </nav>
  </header>

  <!-- HERO -->
  <section class="hero">
    <h1>Pendaftaran Siswa Baru</h1>
    <p>Tahun Pelajaran 2026 / 2027 – SMK DIGITAL</p>
  </section>

  <!-- INFO -->
  <section>
    <div class="info-box">
      <h2>Informasi Pendaftaran</h2>
      <ul>
        <li>Gelombang 1: Januari – Maret</li>
        <li>Gelombang 2: April – Juni</li>
        <li>Seleksi berdasarkan nilai rapor & wawancara</li>
        <li>Jurusan tersedia: RPL, TKJ, Multimedia, Bisnis Digital</li>
      </ul>
    </div>

    <!-- FORM -->
    <h2>Formulir Pendaftaran Online</h2>
    <div class="form-container">
      <form action="proses-daftar.php" method="post">
        <div class="form-grid">

          <div class="form-group">
            <label>Nama Lengkap</label>
            <input type="text" name="nama" required>
          </div>

          <div class="form-group">
            <label>NISN</label>
            <input type="text" name="nisn" required>
          </div>

          <div class="form-group">
            <label>Tempat Lahir</label>
            <input type="text" name="tempat_lahir" required>
          </div>

          <div class="form-group">
            <label>Tanggal Lahir</label>
            <input type="date" name="tanggal_lahir" required>
          </div>

          <div class="form-group">
            <label>Jenis Kelamin</label>
            <select name="jk" required>
              <option value="">-- Pilih --</option>
              <option>Laki-laki</option>
              <option>Perempuan</option>
            </select>
          </div>

          <div class="form-group">
            <label>Asal Sekolah</label>
            <input type="text" name="asal_sekolah" required>
          </div>

          <div class="form-group">
            <label>Jurusan Pilihan</label>
            <select name="jurusan" required>
              <option value="">-- Pilih Jurusan --</option>
              <option>Rekayasa Perangkat Lunak</option>
              <option>Teknik Komputer & Jaringan</option>
              <option>Multimedia</option>
              <option>Bisnis Digital</option>
            </select>
          </div>

          <div class="form-group">
            <label>Nomor HP / WhatsApp</label>
            <input type="tel" name="hp" required>
          </div>

          <div class="form-group form-full">
            <label>Alamat Lengkap</label>
            <textarea name="alamat" required></textarea>
          </div>

        </div>

        <button type="submit" class="btn-submit">Daftar Sekarang</button>
      </form>
    </div>
  </section>

  <!-- FOOTER -->
  <footer id="kontak">
    &copy; 2026 SMK DIGITAL | Sistem Penerimaan Murid Baru
  </footer>

</body>
</html>

di Tidak ada komentar:

TABEL UNTUK HALAMAN PENDAFTARAN

 

TABEL UNTUK HALAMAN PENDAFTARAN


CREATE TABLE pendaftar (

  id INT AUTO_INCREMENT PRIMARY KEY,

  nama VARCHAR(100) NOT NULL,

  nisn VARCHAR(20) NOT NULL,

  tempat_lahir VARCHAR(50) NOT NULL,

  tanggal_lahir DATE NOT NULL,

  jenis_kelamin ENUM('Laki-laki','Perempuan') NOT NULL,

  asal_sekolah VARCHAR(100) NOT NULL,

  jurusan_pilihan VARCHAR(100) NOT NULL,

  no_hp VARCHAR(20) NOT NULL,

  alamat TEXT NOT NULL,

  tanggal_daftar TIMESTAMP DEFAULT CURRENT_TIMESTAMP

);


proses-daftar.php

<?php

$host = "localhost";
$user = "root";
$pass = "";
$db   = "smk_digital";

$koneksi = mysqli_connect($host, $user, $pass, $db);

if (!$koneksi) {
  die("Koneksi gagal: " . mysqli_connect_error());
}

$nama          = $_POST['nama'];
$nisn          = $_POST['nisn'];
$tempat_lahir  = $_POST['tempat_lahir'];
$tanggal_lahir = $_POST['tanggal_lahir'];
$jk            = $_POST['jk'];
$asal_sekolah  = $_POST['asal_sekolah'];
$jurusan       = $_POST['jurusan'];
$hp            = $_POST['hp'];
$alamat        = $_POST['alamat'];

$query = "INSERT INTO pendaftar
          (nama, nisn, tempat_lahir, tanggal_lahir, jenis_kelamin, asal_sekolah, jurusan_pilihan, no_hp, alamat)
          VALUES
          ('$nama','$nisn','$tempat_lahir','$tanggal_lahir','$jk','$asal_sekolah','$jurusan','$hp','$alamat')";

if (mysqli_query($koneksi, $query)) {
  echo "<script>alert('Pendaftaran berhasil!'); window.location='index.php';</script>";
} else {
  echo "Gagal menyimpan data: " . mysqli_error($koneksi);
  echo "<script>alert('Pendaftaran Gagal!'); window.location='index.php';</script>";
}
?>

di Tidak ada komentar:

Senin, 26 Januari 2026

script index web sekolahh

<!-- https://chatgpt.com/c/6976e6cc-76f0-8323-be8b-f3f50a60f99b -->
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>SMK DIGITAL</title>
  <style>
    * {
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, sans-serif;
    }

    body {
      margin: 0;
      background: #f4f6f9;
      color: #333;
    }

    header {
      background: linear-gradient(135deg, #0d47a1, #1976d2);
      color: white;
      padding: 15px 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .logo-box {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .logo {
      width: 55px;
      height: 55px;
      border-radius: 50%;
      background: white;
      color: #0d47a1;
      font-weight: bold;
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 6px rgba(0,0,0,0.2);
    }

    nav a {
      color: white;
      text-decoration: none;
      margin: 0 12px;
      font-weight: 500;
    }

    nav a:hover {
      text-decoration: underline;
    }

    .hero {
      background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
                  url("https://images.unsplash.com/photo-1588072432836-e10032774350") center/cover no-repeat;
      color: white;
      padding: 100px 20px;
      text-align: center;
    }

    .hero h1 {
      font-size: 42px;
      margin-bottom: 10px;
    }

    .hero p {
      font-size: 18px;
      margin-bottom: 25px;
    }

    .btn {
      background: #ffc107;
      color: #333;
      padding: 12px 22px;
      border-radius: 6px;
      text-decoration: none;
      font-weight: bold;
      transition: 0.3s;
    }

    .btn:hover {
      background: #ffb300;
    }

    section {
      padding: 60px 20px;
      max-width: 1100px;
      margin: auto;
    }

    section h2 {
      text-align: center;
      margin-bottom: 40px;
      color: #0d47a1;
    }

    .about p {
      text-align: center;
      max-width: 800px;
      margin: auto;
      line-height: 1.7;
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: 20px;
    }

    .card {
      background: white;
      padding: 25px;
      border-radius: 12px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.08);
      text-align: center;
      transition: 0.3s;
    }

    .card:hover {
      transform: translateY(-5px);
    }

    .card h3 {
      margin-bottom: 10px;
      color: #1976d2;
    }

    .contact {
      background: #e3f2fd;
      border-radius: 12px;
      padding: 40px 20px;
    }

    .contact p {
      text-align: center;
      margin: 8px 0;
    }

    footer {
      background: #0d47a1;
      color: white;
      text-align: center;
      padding: 15px;
      margin-top: 50px;
      font-size: 14px;
    }

    @media (max-width: 600px) {
      .hero h1 {
        font-size: 32px;
      }
      nav {
        margin-top: 10px;
      }
    }
  </style>
</head>
<body>

  <!-- HEADER -->
  <header>
    <div class="logo-box">
      <div class="logo"><img src="img/logo.png" width="80" height="80"></div>
      <div>
        <strong>SMK DIGITAL</strong><br>
        <small>Sekolah Teknologi Masa Depan</small>
      </div>
    </div>
    <nav>
      <a href="#">Beranda</a>
      <a href="#profil">Profil</a>
      <a href="#jurusan">Jurusan</a>
      <a href="#kontak">Kontak</a>
      <a href="login.php">Masuk</a>
      <a href="spmb.php">SPMB</a>
    </nav>
  </header>

  <!-- HERO -->
  <section class="hero">
    <h1>Selamat Datang di SMK DIGITAL</h1>
    <p>Mewujudkan generasi unggul di bidang teknologi dan industri digital</p>
    <a href="#profil" class="btn">Lihat Profil Sekolah</a>
  </section>

  <!-- PROFIL -->
  <section id="profil" class="about">
    <h2>Profil Sekolah</h2>
    <p>
      SMK DIGITAL adalah sekolah menengah kejuruan yang berfokus pada pengembangan
      kompetensi teknologi informasi, rekayasa perangkat lunak, dan keterampilan digital.
      Kami membekali peserta didik dengan pengetahuan, sikap, dan keterampilan
      agar siap menghadapi dunia kerja dan industri masa depan.
    </p>
  </section>

  <!-- JURUSAN -->
  <section id="jurusan">
    <h2>Program Keahlian</h2>
    <div class="cards">
      <div class="card">
        <h3>Rekayasa Perangkat Lunak</h3>
        <p>Pemrograman web, mobile, database, dan aplikasi modern.</p>
      </div>
      <div class="card">
        <h3>Teknik Komputer & Jaringan</h3>
        <p>Instalasi jaringan, server, keamanan sistem, dan infrastruktur IT.</p>
      </div>
      <div class="card">
        <h3>Multimedia</h3>
        <p>Desain grafis, video editing, animasi, dan konten kreatif digital.</p>
      </div>
      <div class="card">
        <h3>Bisnis Digital</h3>
        <p>Digital marketing, e-commerce, dan manajemen bisnis berbasis teknologi.</p>
      </div>
    </div>
  </section>

  <!-- KONTAK -->
  <section id="kontak" class="contact">
    <h2>Kontak Kami</h2>
    <p>📍 Alamat: Jl. Teknologi No. 123, Indonesia</p>
    <p>📞 Telp: (021) 12345678</p>
    <p>📧 Email: info@smkdigital.sch.id</p>
  </section>

  <!-- FOOTER -->
  <footer>
    &copy; 2026 SMK DIGITAL | Website Resmi Sekolah
  </footer>

</body>
</html>

di Tidak ada komentar:
Langganan: Postingan (Atom)

MANAJEMEN BASIS DATA (BACKUP)

MATERI: MANAJEMEN BASIS DATA (BACKUP) 🎯 Tujuan Pembelajaran Peserta didik mampu: Memahami konsep backup database Menjelaska...

  • FUNGSI MENGGUNAKAN NILAI BALIK
    PEMROGRAMAN WEBSITE  Membuat Kode Fungsi dalam Program 4. Fungsi Menggunakan Nilai Balik Setelah memproses nilai input, hampir semua fungsi ...
  • langkah langkah membuat form buku tamu di website sekolah
     1. Buat File css-bukutamu.php simpan di dalam folder c://xampp/htdocs/smk-digital.sch.id/css/css-bukutamu.php  gambar 1. struktur folder cs...
  • FUNGSI REKRUSIF
    6. FUNGSI REKRUSIF Fungsi rekrusif adalah fungsi yang memanggil diri nya sendiri. fungsi ini biasanya di gunakan untuk menyelesaikan masalah...