pkakelas/index.php

## index.php
<!DOCTYPE html>
<?php
  $host    = "localhost";
  $user    = "root";
  $pass    = "root";
  $db_name = "DAVAPS";

  //create connection
  $connection = mysqli_connect($host, $user, $pass, $db_name);

  //test if connection failed
  if (mysqli_connect_errno()) {
    die("connection failed: "
      . mysqli_connect_error()
      . " (" . mysqli_connect_errno()
      . ")");
  }

  //get results from database
  $result = mysqli_query($connection, "SELECT `CourseName` FROM `Courses`");
  $courses = [];

  while ($row = mysqli_fetch_array($result)) {
    $courses[] = $row['CourseName'];
  }

  function createDropdown($name, $elements) {
    $html = "<select name='$name' id='#course-names'>\n";

    foreach ($elements as $element) {
      $html .= "<option>$element</option>\n";
    }
    $html .= "</select>";

    return $html;
  }
?>

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>DARS System</title>
    <link rel="stylesheet" type="text/css" media="screen" href="./style.css" />
    <style>
      table th, table td {
        width: 200px;
        height:70px;
        padding: 5px;
      }

      table span {
        display:block;
        background-color: #ccc;
        border: 1px solid black;
        color: fff;
        height: 30px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <center class="page_header">
      <h1>Course Planner</h1>
    </center>
    <center>
      <div class="control_nav">
        <nav>
          <ul>
            <li><a href="../home.php">Home</a></li>
            <li><a href="">Record</a>
              <ul>
                <li><a href="../record/status.html">Status</a></li>
                <li><a href="../record/grade.html">Grade</a></li>
                <li><a href="../record/gpa.html">GPA</a></li>
              </ul>
            </li>
            <li><a href="">Course</a>
              <ul>
                <li><a href="../course/gel.php">GEL</a></li>
                <li><a href="../course/elective.php">Elective</a></li>
                <li><a href="../course/core.php">Core</a></li>
                <li><a href="../course/upper_division.php">Upper Division</a></li>
                <li><a href="../course/lower_division.php">Lower Division</a></li>
                <li><a href="../course/prerequisite.php">Prerequisite</a></li>
              </ul>
            </li>
            <li><a href="">Plan</a>
              <ul>
                <li><a href="weekly.html">Weekly</a></li>
                <li><a href="semester.html">Semester</a></li>
                <li><a href="yearly.html">Yearly</a></li>
                <li><a href="two_years.html">Two Years</a></li>
                <li><a href="four_years.html">Four Years</a></li>
              </ul>
            </li>
            <li><a href="../contact.php">Contact</a></li>
            <li><a href="logout.php">Logout</a></li>
          </ul>
        </nav>
      </div>
    </center>

    <center>
      <h1>Semester</h1>
      <table id="#our_table" border="1">
        <thead>
          <tr><th>Courses</th></tr>
        <thead>
        <tbody>
        </tbody>
      </table>
    </center>

    <center>
      <div class="info" draggable = "true">
        <form onsubmit="return appendToTable()">
          <?php echo createDropdown('course-1', $courses); ?>
          <?php echo createDropdown('course-2', $courses); ?>
          <?php echo createDropdown('course-3', $courses); ?>
          <?php echo createDropdown('course-4', $courses); ?>
          <input type='submit' value='submit lessons'></submit>
        </form>
      </div>
    </center>

    <center>
      <div class="footer">
        <a href="https://www.metrostate.edu"><h3>Metropolitan State University</h3></a>
      </div>
    </center>

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" crossorigin="anonymous"></script>
    <script>
      const appendToTable = () => {
        var rowCount = $('tbody tr').length;
        if (rowCount > 1) {
          alert('Already selected courses')
          return false;
        }

        const formData = $('form').serializeArray()

        for (element of formData) {
          const name = element['value']
          $('tbody').append('<tr><td>' + name + '</td></tr>');
        }

        return false;
      }
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<?php
	$host = "localhost";
	$user = "root";
	$pass = "root";
	$db_name = "DAVAPS";

	//create connection
	$connection = mysqli_connect($host, $user, $pass, $db_name);

	//test if connection failed
	if (mysqli_connect_errno()) {
	die("connection failed: "
	. mysqli_connect_error()
	. " (" . mysqli_connect_errno()
	. ")");
	}

	//get results from database
	$result = mysqli_query($connection, "SELECT `CourseName` FROM `Courses`");
	$courses = [];

	while ($row = mysqli_fetch_array($result)) {
	$courses[] = $row['CourseName'];
	}

	function createDropdown($name, $elements) {
	$html = "<select name='$name' id='#course-names'>\n";

	foreach ($elements as $element) {
	$html .= "<option>$element</option>\n";
	}
	$html .= "</select>";

	return $html;
	}
	?>

	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>DARS System</title>
	<link rel="stylesheet" type="text/css" media="screen" href="./style.css" />
	<style>
	table th, table td {
	width: 200px;
	height:70px;
	padding: 5px;
	}

	table span {
	display:block;
	background-color: #ccc;
	border: 1px solid black;
	color: fff;
	height: 30px;
	width: 100%;
	}
	</style>
	</head>
	<body>
	<center class="page_header">
	<h1>Course Planner</h1>
	</center>
	<center>
	<div class="control_nav">
	<nav>
	<ul>
	<li><a href="../home.php">Home</a></li>
	<li><a href="">Record</a>
	<ul>
	<li><a href="../record/status.html">Status</a></li>
	<li><a href="../record/grade.html">Grade</a></li>
	<li><a href="../record/gpa.html">GPA</a></li>
	</ul>
	</li>
	<li><a href="">Course</a>
	<ul>
	<li><a href="../course/gel.php">GEL</a></li>
	<li><a href="../course/elective.php">Elective</a></li>
	<li><a href="../course/core.php">Core</a></li>
	<li><a href="../course/upper_division.php">Upper Division</a></li>
	<li><a href="../course/lower_division.php">Lower Division</a></li>
	<li><a href="../course/prerequisite.php">Prerequisite</a></li>
	</ul>
	</li>
	<li><a href="">Plan</a>
	<ul>
	<li><a href="weekly.html">Weekly</a></li>
	<li><a href="semester.html">Semester</a></li>
	<li><a href="yearly.html">Yearly</a></li>
	<li><a href="two_years.html">Two Years</a></li>
	<li><a href="four_years.html">Four Years</a></li>
	</ul>
	</li>
	<li><a href="../contact.php">Contact</a></li>
	<li><a href="logout.php">Logout</a></li>
	</ul>
	</nav>
	</div>
	</center>

	<center>
	<h1>Semester</h1>
	<table id="#our_table" border="1">
	<thead>
	<tr><th>Courses</th></tr>
	<thead>
	<tbody>
	</tbody>
	</table>
	</center>

	<center>
	<div class="info" draggable = "true">
	<form onsubmit="return appendToTable()">
	<?php echo createDropdown('course-1', $courses); ?>
	<?php echo createDropdown('course-2', $courses); ?>
	<?php echo createDropdown('course-3', $courses); ?>
	<?php echo createDropdown('course-4', $courses); ?>
	<input type='submit' value='submit lessons'></submit>
	</form>
	</div>
	</center>

	<center>
	<div class="footer">
	<a href="https://www.metrostate.edu"><h3>Metropolitan State University</h3></a>
	</div>
	</center>

	<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" crossorigin="anonymous"></script>
	<script>
	const appendToTable = () => {
	var rowCount = $('tbody tr').length;
	if (rowCount > 1) {
	alert('Already selected courses')
	return false;
	}

	const formData = $('form').serializeArray()

	for (element of formData) {
	const name = element['value']
	$('tbody').append('<tr><td>' + name + '</td></tr>');
	}

	return false;
	}
	</script>
	</body>
	</html>