如何创建产品详细信息页面？

Question

i would like to create detail page for my sschoold atabase project. The idea is when you click the added lecture, it should bring a detail page. I wrote some codes but it didnt work out.. when i clicked the selected lecture nothing happening (href which is in my coursecontroller.php doesnt work). My Codes are down below.

Thanks in advance

index.html

<div class="row">

    <form method="post" id="add-lecture-form" class="col-xs-6 ajax-form" action="Controller/CourseController.php">
        <div class="form-group">
            <input type="text" name="title" class="form-control lecture-name-field" placeholder="Please enter a lecture name!!">
        </div>
        <input type="hidden" id="action" name="action" value="create">
        <div class="form-group">
            <input type="submit" id="save" class="btn btn-success" value="add a lecture">
        </div>
    </form>

    <div class="col-xs-6">  </div>

    <div id="lecture-result">  </div>

</div>

coursecontroller.php

function getCourseListAsView() {

    $dbConfigObject = new DbConfig;
    $dbConnection = $dbConfigObject->getDBConnection();

    $query = "SELECT * FROM courses";
    $search_query = mysqli_query($dbConnection, $query);

    $listview = "<ul class='course-list'>";

    while ($row = mysqli_fetch_array($search_query)) {
        //title column in db
        $listview .= '<li class="course-list-element">'
                . '<a class="detail-link" data-toggle="modal" data-target="" data-id="' . $row['id'] . '" href="Controller/detail.php">' . $row['title'] . '</a>'
                . '<button type="button" data-toggle="modal" data-target="#myModal" class="btn btn-primary load-edit-form-button" data-id="' . $row['id'] . '" data-title="' . $row['title'] . '" data-action="edit" href="Controller/CourseController.php">edit</button>'
                . '<button type="button" class="btn btn-danger action-button" data-id="' . $row['id'] . '" data-action="delete" href="Controller/CourseController.php">delete</button>'
                . '</li>';
    }
    $listview .= "</ul>";

    echo $listview;
}

detail.php

foreach($_GET as $key=>$value){
    echo $key, ' => ', $value, "<br/>n";

}

$id = $_GET['id'];

if($id) {
    echo '<p/>ID: ', $id, "<br/>n";
}
else {
    echo '<p>No ID parameter.</p>';
}

custom.js

    $('.detail-link').click(function(){
      window.location = 'Controller/detail.php';
    });

Answer 1

option One: Coursedetail.php

function getCourseListAsView() {

    $dbConfigObject = new DbConfig;
    $dbConnection = $dbConfigObject->getDBConnection();

    $query = "SELECT * FROM courses";
    $search_query = mysqli_query($dbConnection, $query);

    $listview = "<ul class='course-list'>";

    while ($row = mysqli_fetch_array($search_query)) {
        //title column in db
        $listview .= '<li class="course-list-element">'
                . '<a class="detail-link" data-toggle="modal" data-target="" data-id="' . $row['id'] . '" href="Controller/detail.php?id=<?php echo $row['id']; ?>">' . $row['title'] . '</a>'
                . '<button type="button" data-toggle="modal" data-target="#myModal" class="btn btn-primary load-edit-form-button" data-id="' . $row['id'] . '" data-title="' . $row['title'] . '" data-action="edit" href="Controller/CourseController.php">edit</button>'
                . '<button type="button" class="btn btn-danger action-button" data-id="' . $row['id'] . '" data-action="delete" href="Controller/CourseController.php">delete</button>'
                . '</li>';
    }
    $listview .= "</ul>";

    echo $listview;
}

Option two : Don't change the course detail.php.

In custom.js file

$('.detail-link').click(function(e){
  e.preventDefault();
  var id =   $(this).data("id");
  window.location = 'Controller/detail.php?id='+id;
});