app/Http/Controllers/BookingController.php

@@ -0,0 +1,119 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\BookingModel;
+use Generator;
+use Illuminate\Http\Request;
+
+class BookingController extends Controller
+{
+    /**
+     * Random Char and Number
+     */
+    public function generateCode() {
+        $kode_unik = '';
+        $charABC = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
+        for($i = 0; $i < 6; $i++) {
+            $randNum = random_int(0, 1);
+            if($randNum == 0) {
+                $kode_unik .= $charABC[random_int(0, strlen($charABC) - 1)];
+            } else if($randNum == 1) {
+                $kode_unik .= str(random_int(0, 9));
+            }
+        }
+
+        $dataAvl = BookingModel::find($kode_unik, 'kode_unik');
+        if($dataAvl != null) {
+            $this->generateCode();
+        } else {
+            return $kode_unik;
+        }
+    }
+
+    /**
+     * Display a listing of the resource.
+     */
+    public function index()
+    {
+        //
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     */
+    public function create()
+    {
+        //
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     */
+    public function store(Request $request)
+    {
+        try {
+            $request->validate([
+                'nama_lengkap' => ['required', 'string'],
+                'email' => ['required', 'string'],
+                'no_telp' => ['required', 'string'],
+                'tgl_booking' => ['required', 'string'],
+                'deskripsi_tambahan' => ['required', 'string']
+            ]);
+
+            $kode_unik = $this->generateCode();
+
+            BookingModel::create([
+                'nama_lengkap' => $request->nama_lengkap,
+                'email' => $request->email,
+                'no_telp' => $request->no_telp,
+                'tgl_booking' => $request->tgl_booking,
+                'deskripsi_tambahan' => $request->deskripsi_tambahan,
+                'kode_unik' => $kode_unik
+            ]);
+
+            return response()->json([
+                'status' => true,
+                'msg' => 'Booking success!'
+            ]);
+        } catch(\Exception $e) {
+            return response()->json([
+                'status' => false,
+                'msg' => $e->getMessage()
+            ]);
+        }
+
+    }
+
+    /**
+     * Display the specified resource.
+     */
+    public function show(string $id)
+    {
+        //
+    }
+
+    /**
+     * Show the form for editing the specified resource.
+     */
+    public function edit(string $id)
+    {
+        //
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function update(Request $request, string $id)
+    {
+        //
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     */
+    public function destroy(string $id)
+    {
+        //
+    }
+}

app/Models/BookingModel.php

@@ -0,0 +1,40 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Support\Str;
+
+class BookingModel extends Model
+{
+    protected $table = 'booking';
+
+    protected $primaryKey = 'id_booking';
+
+    protected $keyType = 'string';
+
+    public $incrementing = false;
+
+    protected $fillable = [
+        'nama_lengkap',
+        'email',
+        'no_telp',
+        'kode_unik',
+        'tgl_booking',
+        'deskripsi_tambahan'
+    ];
+
+    protected $casts = [
+        'id_booking' => 'string',
+    ];
+
+    protected static function boot()
+    {
+        parent::boot();
+        static::creating(function ($model) {
+            if (empty($model->id_booking)) {
+                $model->id_booking = Str::uuid();
+            }
+        });
+    }
+}

database/migrations/2026_03_26_204017_create_booking_table.php

@@ -0,0 +1,31 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('booking', function (Blueprint $table) {
+            $table->uuid('id_booking')->primary();
+            $table->string('nama_lengkap');
+            $table->string('email');
+            $table->string('no_telp');
+            $table->string('kode_unik', 6);
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('booking');
+    }
+};

database/migrations/2026_03_26_204517_add_column_in_booking_table.php

@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('booking', function (Blueprint $table) {
+            $table->date('tgl_booking')->after('no_telp');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('booking', function (Blueprint $table) {
+            $table->dropColumn('tgl_booking');
+        });
+    }
+};

database/migrations/2026_03_26_225718_add_column_in_booking_table.php

@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('booking', function (Blueprint $table) {
+            $table->text('deskripsi_tambahan')->after('no_telp');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('booking', function (Blueprint $table) {
+            $table->dropColumn('deskripsi_tambahan');
+        });
+    }
+};

resources/views/user/layouts/index.blade.php

@@ -7,6 +7,7 @@
   <title>@yield('title') - Smart Anxiety</title>
   <meta name="description" content="">
   <meta name="keywords" content="">
+  <meta id="_token" value="{{ csrf_token() }}">
 
   <!-- Favicons -->
   <link href="{{ asset('assets/users/assets/img/favicon.png') }}" rel="icon">
@@ -59,6 +60,8 @@ class="bi bi-arrow-up-short"></i></a>
   <div id="preloader"></div>
 
   <!-- Vendor JS Files -->
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
   <script src="{{ asset('assets/users/assets/vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
   <script src="{{ asset('assets/users/assets/vendor/php-email-form/validate.js') }}"></script>
   <script src="{{ asset('assets/users/assets/vendor/aos/aos.js') }}"></script>
@@ -69,6 +72,8 @@ class="bi bi-arrow-up-short"></i></a>
   <!-- Main JS File -->
   <script src="{{ asset('assets/users/assets/js/main.js') }}"></script>
 
+  @yield('script')
+
 </body>
 
 </html>

resources/views/user/pages/index.blade.php

@@ -331,8 +331,7 @@
           <div class="booking-wrapper">
             <div class="booking-header text-center" data-aos="fade-up" data-aos-delay="200">
               <h2>Schedule Your Appointment</h2>
-              <p>Book your medical appointment in just a few simple steps. Our experienced healthcare professionals
+              <p>Jika ingin mencoba sistem kami, jadwalkan periksa kamu dengan mengisi form dibawah ini yaa! Dan batalkan kapan saja!</p>
-                are ready to provide you with the best care possible.</p>
             </div>
 
             <div class="booking-steps" data-aos="fade-up" data-aos-delay="300">
@@ -366,61 +365,38 @@
             </div>
 
             <div class="appointment-form" data-aos="fade-up" data-aos-delay="400">
-              <form action="forms/book-appointment.php" method="post" class="php-email-form">
+              <div class="php-email-form">
                 <div class="row gy-4">
                   <div class="col-md-6">
-                    <input type="text" name="name" class="form-control" placeholder="Full Name" required="">
+                    <input type="text" name="nama_lengkap" id="nama_lengkap" class="form-control" placeholder="Nama Lengkap" required="">
                   </div>
                   <div class="col-md-6">
-                    <input type="email" name="email" class="form-control" placeholder="Email Address" required="">
+                    <input type="email" name="email" id="email" class="form-control" placeholder="Alamat Email Aktif" required="">
                   </div>
                   <div class="col-md-6">
-                    <input type="tel" name="phone" class="form-control" placeholder="Phone Number" required="">
+                    <input type="tel" name="phone" id="no_telp" class="form-control" placeholder="Nomor Telepon" required="">
                   </div>
                   <div class="col-md-6">
-                    <select name="department" class="form-select" required="">
+                    <input type="date" name="date" id="tgl_book" class="form-control" required="" aria-describedby="dateHelp">
-                      <option value="">Select Department</option>
+                    <div id="dateHelp" class="form-text">Untuk detail jam, akan dikirim melalui email mu yaa.</div>
-                      <option value="general">General Consultation</option>
-                      <option value="cardiology">Cardiology</option>
-                      <option value="neurology">Neurology</option>
-                      <option value="orthopedics">Orthopedics</option>
-                      <option value="pediatrics">Pediatrics</option>
-                      <option value="dermatology">Dermatology</option>
-                      <option value="oncology">Oncology</option>
-                    </select>
-                  </div>
-                  <div class="col-md-6">
-                    <input type="date" name="date" class="form-control" required="">
-                  </div>
-                  <div class="col-md-6">
-                    <select name="doctor" class="form-select" required="">
-                      <option value="">Select Doctor</option>
-                      <option value="dr-sarah-johnson">Dr. Sarah Johnson</option>
-                      <option value="dr-michael-chen">Dr. Michael Chen</option>
-                      <option value="dr-emily-davis">Dr. Emily Davis</option>
-                      <option value="dr-robert-smith">Dr. Robert Smith</option>
-                      <option value="dr-lisa-brown">Dr. Lisa Brown</option>
-                      <option value="dr-david-wilson">Dr. David Wilson</option>
-                      <option value="dr-maria-rodriguez">Dr. Maria Rodriguez</option>
-                    </select>
                   </div>
                   <div class="col-12">
-                    <textarea name="message" class="form-control" rows="4"
+                    <textarea name="message" class="form-control" rows="4" id="deskripsi"
-                      placeholder="Additional notes or symptoms (optional)"></textarea>
+                      placeholder="Tambahan deskripsi (optional)"></textarea>
                   </div>
                   <div class="col-12">
-                    <div class="loading">Loading</div>
+                    <div class="loading" id="loading_btn">Loading</div>
-                    <div class="error-message"></div>
+                    <div class="alert alert-danger" id="error_msg" role="alert" style="display: none"></div>
                     <div class="sent-message">Your appointment has been scheduled. Thank you!</div>
-                    <button type="submit" class="btn-book">Book Appointment Now</button>
+                    <button type="button" class="btn-book" onclick="sendAppointment()">Book Appointment Now</button>
                   </div>
                 </div>
-              </form>
+              </div>
             </div>
 
             <div class="emergency-info" data-aos="fade-up" data-aos-delay="500">
-              <p><i class="bi bi-exclamation-triangle"></i> For medical emergencies, please call <strong>911</strong>
+              <p><i class="bi bi-exclamation-triangle"></i> Untuk darurat, harap hubungi <strong>112</strong>
-                or go to the nearest emergency room.</p>
+                atau kunjungi rumah sakit terdekat.</p>
             </div>
 
           </div>
@@ -431,3 +407,82 @@
 
   </section><!-- /Appointmnet Section -->
 @endsection
+
+@section('script')
+  <script>
+    function sendAppointment() {
+      $('#error_msg').hide();
+
+      let name = $('#nama_lengkap').val();
+      let email = $('#email').val();
+      let no_telp = $('#no_telp').val();
+      let tgl_book = $('#tgl_book').val();
+      let deskripsi = $('#deskripsi').val();
+
+      if(!name) {
+        $('#error_msg').html('<i class="bi bi-exclamation-octagon"></i> Silahkan lengkapi nama lengkap kamu yaa!');
+        $('#error_msg').show();
+      }
+      if(!email) {
+        $('#error_msg').html('<i class="bi bi-exclamation-octagon"></i> Silahkan lengkapi email kamu yaa!');
+        $('#error_msg').show();
+      }
+      if(!no_telp) {
+        $('#error_msg').html('<i class="bi bi-exclamation-octagon"></i> Silahkan lengkapi nomor telepon kamu kamu yaa!');
+        $('#error_msg').show();
+      }
+      if(!tgl_book) {
+        $('#error_msg').html('<i class="bi bi-exclamation-octagon"></i> Silahkan lengkapi tanggal booking kamu yaa!');
+        $('#error_msg').show();
+      }
+
+      let xhttp = new XMLHttpRequest();
+      let formData = new FormData();
+
+      formData.append('nama_lengkap', name);
+      formData.append('email', email);
+      formData.append('no_telp', no_telp);
+      formData.append('tgl_booking', tgl_book);
+      if(!deskripsi) {
+        formData.append('deskripsi_tambahan', 'Tidak ada (tidak diisi)');
+      } else {
+        formData.append('deskripsi_tambahan', deskripsi);
+      }
+      formData.append('_token', document.getElementById('_token').getAttribute('value'));
+
+      xhttp.onreadystatechange = function() {
+        if(this.readyState == 4 && this.status == 200) {
+          let response = JSON.parse(this.responseText);
+          if(response.status) {
+            Swal.fire({
+              title: "Info",
+              text: "Kamu berhasil daftar. Cek email kamu untuk lebih lanjut!",
+              icon: "success"
+            });
+            $('#nama_lengkap').val('');
+            $('#email').val('');
+            $('#no_telp').val('');
+            $('#tgl_book').val('');
+            $('#deskripsi').val('');
+          } else if(response.status == false) {
+            Swal.fire({
+              title: "Info",
+              text: "Terjadi kesalahan, coba ulangi lagi yaa!",
+              icon: "warning"
+            });
+          } else {
+            Swal.fire({
+              title: "Info",
+              text: "Terjadi kesalahan dari server, coba lagi nanti!",
+              icon: "danger"
+            });
+          }
+        }
+      }
+
+      xhttp.open('POST', '{{ route('booking.store') }}');
+      xhttp.send(formData);
+      
+    }
+  </script>
+@endsection

routes/web.php

@@ -1,5 +1,6 @@
 <?php
 
+use App\Http\Controllers\BookingController;
 use App\Http\Controllers\DashboardController;
 use App\Http\Controllers\DataSoalController;
 use App\Http\Controllers\HasilTesController;
@@ -24,6 +25,7 @@
 
 Route::resource('beranda', LandingController::class)->only(['index']);
     Route::get('/about', [LandingController::class, 'about'])->name('beranda.about');
+Route::resource('booking', BookingController::class)->only(['store']);
 Route::middleware(['auth', 'role.auth'])->group(function() {
     Route::resource('dashboard', DashboardController::class);
     Route::resource('users', UsersController::class);