ฟอร์มสมัครเข้าชมรมนักศึกษา ออกแบบด้วย Bootstrap5 (ฟรี Code)

สวัสดีครับ ในบทความนี้จะแจกฟอร์มสมัครเข้าชมรมนักศึกษา สำหรับเอาไปทำระบบสารสนเทศเกี่ยวกับนักศึกษา ออกแบบโดยใช้ bootstrap5 แจกให้เอาไปศึกษาและพัฒนาต่อยอดครับ

ขอแนะนำระบบพร้อมใช้ ราคาถูก ได้ Code + Database ทั้งหมด
1.เว็บอีคอมเมิร์ช คลิก
2.เว็บ FOOD POS ขายอาหารหน้าร้าน คลิก
3.เว็บ Coffee POS ขายกาแฟหน้าร้าน คลิก
4.หลังบ้านระบบอีคอมเมิร์ช คลิก
5.เว็บบริษัท / เว็บองค์กร คลิก
6.ระบบหอพัก โปรแกรมหอพัก คลิก
7.ระบบยืมคืน เบิกจ่ายพัสดุ ครุภัณฑ์ คลิก
8.ระบบแจ้งซ่อมสำหรับองค์กร คลิก
9.ระบบกระเป๋าตังค์ คลิก
10.ระบบฐานข้อมูลวิจัย คลังข้อมูลวิจัย ฐานข้อมูลวิทยานิพนธ์ Research Corpus คลิก
11.ระบบอื่นๆ เพิ่มเติม คลิก

ขอแนะนำ ระบบฐานข้อมูลศิษย์เก่า, ระบบศิษย์เก่า, alumni system, ทะเบียนศิษย์เก่า (PHP)

Web Application #PHP #MySqli AdminLTE Support PHP7
การทำงาน
#ผู้ดูแลระบบ
-Login/Logout เข้าใช้งานระบบ
-จัดการข้อมูล ผู้ดูแลระบบ/จนท. (เพิ่ม ลบ แก้ไข รีเซตรหัสผ่าน)
-จัดการข้อมูลสาขาวิชา (เพิ่ม ลบ แก้ไข)
-จัดการข้อมูลศิษย์เก่า (เพิ่ม ลบ แก้ไข อนุมัติ รีเซตรหัสผ่าน)
-จัดการข้อมูลสไลด์ (เพิ่ม ลบ แก้ไข)
-จัดการข้อมูลข่าวสาร (เพิ่ม ลบ แก้ไข)
-รายงาน ข้อมูลศิษย์เก่าแยกตามสาขา
-รายงาน แสดงจำนวนผู้เข้าชมเว็บไซต์เป็นกราฟแยกตามเดือน

#จนท.
-Login/Logout เข้าใช้งานระบบ
-จัดการโปรไฟล์
-จัดการข้อมูลสไลด์ (เพิ่ม ลบ แก้ไข)
-จัดการข้อมูลข่าวสาร (เพิ่ม ลบ แก้ไข)
-ดูข้อมูลศิษย์เก่าแยกตามสาขา

#ศิษย์เก่า
-Login/Logout เข้าใช้งานระบบ
-จัดการโปรไฟล์

#ผู้ใช้ทั่วไป
-ดูข่าวสารหน้าเว็บไซต์
-สมัครสมาชิก

demo : https://devbanban.com/app/alumni/

ค่าตัว 7,900 บาท ให้โค้ดพร้อมฐานข้อมูลทั้งหมด
สนใจติดต่อมาที่แฟนเพจ https://www.facebook.com/sornwebsites
สามารถนำไปใช้งานจริง และพัฒนาต่อยอดได้เต็มที่

ปล.ต้องการให้ติดตั้งบนเซิฟเวอร์จริงคิดเพิ่ม 2000 บาท + ลูกค้าต้องมีเซิฟเวอร์ PHP7 MySQL ให้ ทางผมจะรีโมทไปติดตั้งและทดสอบให้ครับ กรณีทำเป็นอยู่แล้วก็ไม่ต้องเสียส่วนนี้เพิ่มครับผม

คลิปแสดงการทำงาน

class หลักๆ ที่ใช้

class col (grid)
class alert
class form
class btn
js image preview
อื่นๆ เอาไปต่อยอดเองได้เต็มที่

Full Code สามารถ save เป็นไฟล์ .html และ run ได้เลยครับ เช่น formAddStdClub.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
    <title>ฟอร์มสมัครเข้าชมรม ออกแบบจาก bootstrap5 by devbanban.com 2022</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="alert alert-danger" role="alert">
            <h3>ฟอร์มสมัครเข้าชมรมนักศึกษา </h3>
          </div>
          <form action="" method="post" class="form-horizontal" enctype="multipart/form-data">
            <div class="form-group row mb-3">
              <div class="col-sm-2 control-label">
                ชมรมที่สนใจ :
              </div>
              <div class="col-sm-4">
                <select name="club_id" class="form-control" required>
                  <option value="">เลือกข้อมูล</option>
                  <option value="1">-ชมรมโปรแกรมเมอร์</option>
                  <option value="2">-ชมรมถ่ายภาพ</option>
                  <option value="3">-ชมรมดนตรี</option>
                  <option value="4">-ชมรมกีฬา</option>
                  <option value="5">-ชมรมยูทูปเบอร์</option>
                </select>
              </div>
              <div class="col-sm-2 control-label" class="form-control" >
                รหัสนักศึกษา :
              </div>
              <div class="col-sm-2">
                <input type="text" name="std_code" required minlength="4" maxlength="13" class="form-control"  placeholder="รหัสนักศึกษา">
              </div>
               
            </div>
            
            <div class="form-group row mb-3">
              <div class="col-sm-2 control-label">
                คำนำหน้า :
              </div>
              <div class="col-sm-2">
                <select name="std_title" class="form-control" required>
                  <option value="">เลือกข้อมูล</option>
                  <option value="นาย">นาย</option>
                  <option value="นาง">นาง</option>
                  <option value="นางสาว">นางสาว</option>
                  <option value="ว่าที่ร้อยตรี">ว่าที่ร้อยตรี</option>
                </select>
              </div>
              
              <div class="col-sm-1 control-label">
                ชื่อ :
              </div>
              <div class="col-sm-2">
                <input type="text" name="std_name" required class="form-control" minlength="2" placeholder="ชื่อ">
              </div>
              
              <div class="col-sm-1 control-label">
                นามสกุล :
              </div>
              <div class="col-sm-2">
                <input type="text" name="std_lastname" required class="form-control" minlength="2" placeholder="นามสกุล">
              </div>
            </div>
            
            <div class="form-group row mb-3">
              <div class="col-sm-2 control-label">
                เบอร์โทร :
              </div>
              <div class="col-sm-3">
                <input type="text" name="std_phone" required class="form-control"  placeholder="เบอร์มือถือ" maxlength="15">
              </div>
              
              <div class="col-sm-1 control-label">
                อีเมล์ :
              </div>
              <div class="col-sm-3">
                <input type="email" name="std_email" required class="form-control"  placeholder="email">
              </div>
            </div>
           
            <div class="form-group row mb-3">
              <div class="col-sm-2 control-label">
                ภาพโปรไฟล์ :
              </div>
              <div class="col-sm-2">
                <script type='text/javascript'>
                function preview_image(event)
                {
                var reader = new FileReader();
                reader.onload = function()
                {
                var output = document.getElementById('showimg');
                output.src = reader.result;
                }
                reader.readAsDataURL(event.target.files[0]);
                }
                </script>
                <img  id="showimg" width="100" height="100"> <br><br>
                <input type="file" id="showimg" name="std_img" required accept="image/png, image/jpeg, image/jpg" onchange="preview_image(event)">
              </div>
            </div>

           
            <div class="form-group row mb-3">
              <div class="col-sm-2">
              </div>
              <div class="col-sm-3">
                
                <button type="submit" class="btn btn-primary">สมัครเข้าชมรม</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </body>
</html>

<!--
  devbanban.com
//ขอแนะนำระบบพร้อมใช้ ราคาเบาๆ ซื้อแล้วได้ code ทั้งหมด เอาไปต่อยอดได้
// ระบบฐานข้อมูลศิษย์เก่า https://www.youtube.com/watch?v=1gOSGHX3xDI
//ระบบแจ้งซ่อม https://www.youtube.com/watch?v=bkYBKfFauB8
//ระบบจัดการหอพัก https://www.youtube.com/watch?v=O7Bh0BNCDz8
//ระบบสอบออนไลน์ https://www.youtube.com/watch?v=WOTLFEflkMk
//ระบบพร้อมใช้ทั้งหมด https://devbanban.com/?p=4425
-->

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

<!DOCTYPE html>

<head>

<title>ฟอร์มสมัครเข้าชมรม ออกแบบจาก bootstrap5 by devbanban.com 2022</title>

</head>

<body>

<h3>ฟอร์มสมัครเข้าชมรมนักศึกษา </h3>

</div>

ชมรมที่สนใจ :

</div>

<option value="">เลือกข้อมูล</option>

<option value="1">-ชมรมโปรแกรมเมอร์</option>

<option value="2">-ชมรมถ่ายภาพ</option>

<option value="3">-ชมรมดนตรี</option>

<option value="4">-ชมรมกีฬา</option>

<option value="5">-ชมรมยูทูปเบอร์</option>

</select>

</div>

รหัสนักศึกษา :

</div>

</div>

คำนำหน้า :

</div>

<option value="">เลือกข้อมูล</option>

<option value="นางสาว">นางสาว</option>

<option value="ว่าที่ร้อยตรี">ว่าที่ร้อยตรี</option>

</select>

</div>

ชื่อ :

</div>

</div>

นามสกุล :

</div>

</div>

เบอร์โทร :

</div>

</div>

อีเมล์ :

</div>

</div>

ภาพโปรไฟล์ :

</div>

function preview_image(event)

{

var reader = new FileReader();

reader.onload = function()

{

var output = document.getElementById('showimg');

output.src = reader.result;

}

reader.readAsDataURL(event.target.files[0]);

}

</script>

</div>

</div>

<button type="submit" class="btn btn-primary">สมัครเข้าชมรม</button>

</div>

</form>

</div>

</body>

</html>

<!--

devbanban.com

//ขอแนะนำระบบพร้อมใช้ ราคาเบาๆ ซื้อแล้วได้ code ทั้งหมด เอาไปต่อยอดได้

// ระบบฐานข้อมูลศิษย์เก่า https://www.youtube.com/watch?v=1gOSGHX3xDI

//ระบบแจ้งซ่อม https://www.youtube.com/watch?v=bkYBKfFauB8

//ระบบจัดการหอพัก https://www.youtube.com/watch?v=O7Bh0BNCDz8

//ระบบสอบออนไลน์ https://www.youtube.com/watch?v=WOTLFEflkMk

//ระบบพร้อมใช้ทั้งหมด https://devbanban.com/?p=4425

-->

นำไปต่อยอดทำระบบ PHP MySQL คลิก.

สนใจจ้างพัฒนาระบบหรือสอนทำระบบที่อยากได้ (สอนผ่าน google meet) สามารถติดต่อมาที่แฟนเพจ เวลา 10.00 – 20.00 น.

inbox click

ร่วมสนับสนุน ค่ากาแฟ ค่าโฮส devbanban.com ได้ที่

ธนาคารกรุงไทย สาขาเดอะมอลล์ท่าพระ
ชื่อบัญชี นายพิศิษฐ์ บวรเลิศสุธี เลขที่ 878-0-17747-6
————————————————————————————
ธนาคารไทยพาณิชย์ สาขามหาวิทยาลัยราชภัฏธนบุรี
ชื่อบัญชี นายพิศิษฐ์ บวรเลิศสุธี เลขที่ 406-359094-1
————————————————————————————
ธนาคารกสิกร สาขาเออร์เบิร์น สแควร์ ประชาชื่น
ชื่อบัญชี นายพิศิษฐ์ บวรเลิศสุธี เลขที่ 048-1-17571-2

fanpage : https://www.facebook.com/sornwebsites/

devbanban

ฟอร์มสมัครเข้าชมรมนักศึกษา ออกแบบด้วย Bootstrap5 (ฟรี Code)

Byพิศิษฐ์ บวรเลิศสุธี

Related

Related Post

แจกฟรี To-do list Ui ออกแบบจาก Bootstrap v5.3

Free Code : Bootstrap 5 Form Validation

เทมเพลตเว็บร้านเบเกอรี่ ร้านเค้ก Bootstrap5.3, Bakery, Cake Web Template (Free Code)

You missed

ระบบบริหารบุคลากร ระบบ HR + ระบบบันทึกเวลาเข้างาน

ฟรีคลิปสอนทำเว็บไซต์ PHP PDO MySQL AdminLTE3 2024

ระบบหอพัก , อพาร์ทเม้นท์ รายวัน รายเดือน ราคาเบาๆ เอาไปต่อยอดได้ 2024

แจกฟรี To-do list Ui ออกแบบจาก Bootstrap v5.3

Byพิศิษฐ์ บวรเลิศสุธี

Share this:

Related

Related Post

You missed