Membuat Website Professional dengan PHP MySql - PART #15 : Halaman Contact & Email

Sampai juga di akhir seri Membuat Website Professional dengan PHP & MySql, seperti yang sudah saya sampaikan sebelumnya di part 15 ini saya akan membuat halaman contact yang nantinya terdapat sebuah form yang langsung terhubung dengan email. Sebelumnya seperti biasa silahkan dilihat terlebih dahulu beberapa posting terkait berikut:

• Membuat Website Professional dengan PHP & MySql - PART #1 : Pengertian Dasar & Tools
• Membuat Website Professional dengan PHP & MySql - PART #2 : Setup Database, Table & Hirarki Folder
• Membuat Website Professional dengan PHP & MySql - PART #3 : Membuat Login Admin & Dashboard
• Membuat Website Professional dengan PHP & MySql - PART #4 : Customized Login Admin & Dashboard
• Membuat Website Professional dengan PHP & MySql - PART #5 : Membuat Halaman Profile Admin & Integrasi Gravatar
• Membuat Website Professional dengan PHP & MySql - PART #6 : Manajemen Halaman
• Membuat Website Professional dengan PHP & MySql - PART #7 : Manajemen Kategori
• Membuat Website Professional dengan PHP & MySql - PART #8 : Manajemen Post
• Membuat Website Professional dengan PHP & MySql - PART #9 : Manajemen Password Admin
• Membuat Website Professional dengan PHP & MySql - PART #10 : Pengaturan Global, Htaccess & Halaman Frontend
• Membuat Website Professional dengan PHP & MySql - PART #11 : Halaman About & 404
• Membuat Website Professional dengan PHP & MySql - PART #12 : Halaman Blog & Single Post
• Membuat Website Professional dengan PHP & MySql - PART #13 : Halaman Kategori & Search
• Membuat Website Professional dengan PHP & MySql - PART #14 : Upload ke Hosting & Pengaturan Database

#1 Membuat Halaman Contact

Mengapa halaman contact ini saya buat paling belakang? jawabannya adalah karena saya akan menggunakan sebuah fungsi PHP yaitu mail(). Untuk referensi tentang fungsi mail() bisa dilihat di web fungsi mail() php atau di web w3schools. Dari apa yang saya alami di berbagai web hosting, tidak semua hosting mengaktifkan fungsi mail() secara default, jadi tergantung hosting provider masing2 dan versi PHP itu sendiri.

• Hidupkan XAMPP anda atau jika anda sudah meng-uplodnya ke hosting, Baca kembali Membuat website professional dengan PHP & Mysql Part 14;
• Buka cpanel anda >> File Manager >> Folder Instalasi website anda (hospital.nawadwipa.id) >> Cari icon + Files kemudian beri nama contact.php 
• Bagi yang masih bekerja di localhost, seperti biasa buat file php baru dan beri nama contact.php (tanpa .php) dan simpan di dalam folder hospital
• Copy kode berikut dan simpan

  <?php
  $notify = '';
  $notifyClass = '';
  
  if(isset($_POST['name'])){
      // Membuat variabl untuk menerima data dari form
      $email = $_POST['email'];
      $name = $_POST['name'];
      $subject = $_POST['subject'];
      $message = $_POST['message'];
  
      // Cek apakah ada data yang belum diisi
      if(!empty($email) && !empty($name) && !empty($subject) && !empty($message)){
  
          if(filter_var($email, FILTER_VALIDATE_EMAIL) === false){
              $notify = 'Email Anda salah. Silakan ketikan alamat email yang benar.';
              $notifyClass = 'errordiv';
          }else{
              // Pengaturan penerima email dan subjek email
              $toEmail = 'me@adityasubawa.com'; // Ganti dengan alamat email yang Anda inginkan
              $emailSubject = 'Pesan website dari '.$name;
              $htmlContent = '
  via Form Kontak Website
  Nama : '.$name.'
  Email : '.$email.'
  Subject : '.$subject.'
  Message : '.$message.'';
  
              $headers = 'From: '.$name.'<'.$email.'>'. "\r\n";
             
              // Kirim email
              if(mail($toEmail,$emailSubject,$htmlContent,$headers)){
                  $notify = 'Pesan Anda sudah terkirim dengan sukses !';
                  $notifyClass = 'succdiv';
              }else{
                  $notify = 'Maaf pesan Anda gagal terkirim, silahkan ulangi lagi.';
                  $notifyClass = 'errordiv';
              }
          }
      }else{
          $notify = 'Harap mengisi semua field data';
          $notifyClass = 'errordiv';
      }
  }
  ?>
  <!-- bradcam_area_start  -->
      <div class="bradcam_area breadcam_bg bradcam_overlay">
          <div class="container">
              <div class="row">
                  <div class="col-xl-12">
                      <div class="bradcam_text">
                          <h3>Contact</h3>
                          <p><a href="<?php echo $base_url;?>">Home /</a> Contact</p>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      <!-- bradcam_area_end  -->
      
       <!-- ================ contact section start ================= -->
      <section class="contact-section" id="notif">
              <div class="container">
                  <div class="row">
                      <div class="col-12">
                          <h2 class="contact-title">Get in Touch</h2>
                      </div>
                      <div class="col-lg-8">
                     <?php if(!empty($notify)){ ?>
                  <p id="notif" class="notify <?php echo !empty($notifyClass)?$notifyClass:''; ?>"><?php echo $notify; ?></p>
              <?php } ?>
                          <form class="form-contact contact_form" action="<?php echo $base_url;?>contact#notif" method="post">
                              <div class="row">
                                  <div class="col-12">
                                      <div class="form-group">
                                          <textarea class="form-control w-100" name="message" id="message" cols="30" rows="9" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter Message'" placeholder=" Enter Message"></textarea>
                                      </div>
                                  </div>
                                  <div class="col-sm-6">
                                      <div class="form-group">
                                          <input class="form-control valid" name="name" id="name" type="text" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter your name'" placeholder="Enter your name">
                                      </div>
                                  </div>
                                  <div class="col-sm-6">
                                      <div class="form-group">
                                          <input class="form-control valid" name="email" id="email" type="email" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter email address'" placeholder="Email">
                                      </div>
                                  </div>
                                  <div class="col-12">
                                      <div class="form-group">
                                          <input class="form-control" name="subject" id="subject" type="text" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter Subject'" placeholder="Enter Subject">
                                      </div>
                                  </div>
                              </div>
                              <div class="form-group mt-3">
                                  <button type="submit" class="button button-contactForm boxed-btn">Send</button>
                              </div>
                          </form>
                      </div>
                      <div class="col-lg-3 offset-lg-1">
                          <div class="media contact-info">
                              <span class="contact-info__icon"><i class="ti-home"></i></span>
                              <div class="media-body">
                                  <?php echo $address;?>
                              </div>
                          </div>
                          <div class="media contact-info">
                              <span class="contact-info__icon"><i class="ti-tablet"></i></span>
                              <div class="media-body">
                                  <h3><?php echo $phone;?></h3>
                                  <p>Mon to Fri 9am to 6pm</p>
                              </div>
                          </div>
                          <div class="media contact-info">
                              <span class="contact-info__icon"><i class="ti-email"></i></span>
                              <div class="media-body">
                                  <h3><?php echo $email;?></h3>
                                  <p>Send us your query anytime!</p>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </section>
      <!-- ================ contact section end ================= -->​

• Penjelasan kode diatas sederhana saja yaitu form contact akan mengirim data ke email tujuan 

  $toEmail = 'me@adityasubawa.com'; 
  Dan jika field terisi maka akan dieksekusi dengan menggunakan fungsi mail() 

  if(mail($toEmail,$emailSubject,$htmlContent,$headers)){
                  $notify = 'Pesan Anda sudah terkirim dengan sukses !';
                  $notifyClass = 'succdiv';
              }else{
                  $notify = 'Maaf pesan Anda gagal terkirim, silahkan ulangi lagi.';
                  $notifyClass = 'errordiv';
              }

Baca Juga: EF Adults Kursus Bahasa Inggris Profesional

#2 Email

Hasil test saya pada halaman contact form terkeirim dengan baik seperti terlihat pada gambar berikut

Sekian tutorial seri Membuat Website Professional dengan PHP & MySql, bagi yang ingin file nya untuk pembelajaran dan pengembangan silahkan anda download disini.

I’d love to hear from you, leave a Reply!

• jeef November 17, 2021
  

  thanks.... the best tutorialnya ...

Submit