manageNews.php
Fri Nov 20 2020 12:51:43 GMT+0000 (Coordinated Universal Time)
Saved by @uchenliew #php
<html lang="en"> <head> <!--using external files--> <?php require('import.html') ?> <title>U Chen Daily | Admin</title> <script type="text/javascript"> setTimeout(function(){ document.querySelector('.close').click(); }, 2500); </script> <!--show news info for editing START--> <script type="text/javascript"> $(document).ready(function(){ $('.btnEdit').on('click', function(){ $('#updNewsModal').modal('show'); $tr = $(this).closest('tr'); var data = $tr.children("td").map(function(){ return $(this).text(); }).get(); console.log(data); $('#update_id').val(data[0]); $('#news_datetime').val(data[1]); $('#news_title').val(data[2]); $('#news_details').val(data[3]); $('#news_category').val(data[4]); $('#news_image').val(data[5]); }); }); </script> <!--show news info for editing END--> <!--show confirmation message for deleting START--> <script type="text/javascript"> $(document).ready(function(){ $('.btnDel').on('click', function(){ $('#delNewsModal').modal('show'); $tr = $(this).closest('tr'); var data = $tr.children("td").map(function(){ return $(this).text(); }).get(); console.log(data); $('#delete_id').val(data[0]); }); }); </script> <!--show confirmation message for deleting END--> <!--show file name after uploading image START--> <script type="text/javascript"> $(document).ready(function() { bsCustomFileInput.init(); }); </script> <!--show file name after uploading image END--> <body> <!--using external files--> <?php if(empty($_SESSION['username'])){ header('Location: /205CDE/Assignment/home.php'); } ?> <?php require('header.php'); ?> <div class="container" style="margin: 20px;"> <div class="row"> <div class="col-sm"><h3 style="color: #1f52a3;">Manage News</h3></div> </div> </div> <!--add news modal START--> <!-- Modal --> <div class="modal fade bd-example-modal-lg" id="addNewsModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Add News</h5> <!--<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button>--> </div> <form action="/205CDE/Assignment/insertData.php" method="post" enctype="multipart/form-data"> <div class="modal-body"> <div class="form-group"> <label for="inputNewsTitle">News Title:</label> <input type="text" class="form-control" name="txtNewsTitle" id="inputNewsTitle" aria-describedby="emailHelp" placeholder="Enter news title"> </div> <div class="form-group"> <label for="selectNewsCategory">News Category:</label> <select class="form-control" name="selectNewsCategory" id="selectNewsCategory"> <?php $newsCategoryArr = array( '--Select news category--' => "", 'Nation' => 1, 'World' => 2, 'Sport' => 3, 'Entertainment' => 4 ); foreach($newsCategoryArr as $newsType => $newsNum){ echo "<option value=\"$newsType\">$newsType</option>"; } ?> </select> </div> <div class="form-group mb-3"> <label for="inputNewsImage" class="col-form-label">News Image:</label> <div class="custom-file"> <input type="file" class="custom-file-input" name="uploadNewsImg" id="customFile"> <label class="custom-file-label" for="customFile">Choose file</label> </div> </div> <div class="form-group"> <label for="inputNewsDetails" class="col-form-label">News Details:</label> <textarea class="form-control" name="txtNewsDetails" id="inputNewsDetails" rows="10"></textarea> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> <button type="submit" class="btn btn-primary" name="addNewsData" style="background: #1f52a3;">Add</button> </div> </form> </div> </div> </div> <!--add news modal END--> <!--edit news modal START--> <!-- Modal --> <div class="modal fade bd-example-modal-lg" id="updNewsModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Edit News</h5> <!--<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button>--> </div> <form action="/205CDE/Assignment/updateData.php" method="post" enctype="multipart/form-data"> <div class="modal-body"> <input type="hidden" name="update_id" id="update_id"> <div class="form-group"> <label for="txtNewsDatetime">News Created Datetime:</label> <input type="text" class="form-control" name="txtNewsDatetime" id="news_datetime" aria-describedby="emailHelp" placeholder="Enter news datetime" disabled> </div> <div class="form-group"> <label for="inputNewsTitle">News Title:</label> <input type="text" class="form-control" name="txtNewsTitle" id="news_title" aria-describedby="emailHelp" placeholder="Enter news title"> </div> <div class="form-group"> <label for="selectNewsCategory">News Category:</label> <select class="form-control" name="selectNewsCategory" id="news_category"> <?php $newsCategoryArr = array( '--Select news category--' => "", 'Nation' => 1, 'World' => 2, 'Sport' => 3, 'Entertainment' => 4 ); foreach($newsCategoryArr as $newsType => $newsNum){ echo "<option value=\"$newsType\">$newsType</option>"; } ?> </select> </div> <div class="form-group mb-3"> <label for="inputNewsImage" class="col-form-label">News Image:</label> <div class="custom-file"> <input type="file" class="custom-file-input" name="uploadNewsImg" id="news_image"> <label class="custom-file-label" for="news_image"></label> </div> </div> <div class="form-group"> <label for="inputNewsDetails" class="col-form-label">News Details:</label> <textarea class="form-control" name="txtNewsDetails" id="news_details" rows="10"></textarea> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> <button type="submit" class="btn btn-primary" name="updNewsData" style="background: #1f52a3;">Edit</button> </div> </form> </div> </div> </div> <!--edit news modal END--> <!--delete news modal START--> <!-- Modal --> <div class="modal fade" id="delNewsModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <form action="/205CDE/Assignment/deleteData.php" method="post"> <div class="modal-body"> <input type="hidden" name="delete_id" id="delete_id"> <div class="d-flex justify-content-center" style="margin: 25px 0;"> <i class="fas fa-times-circle text-danger" style="font-size: 100px;"></i> </div> <div class="d-flex justify-content-center"> <h4>Are you sure?</h4> </div> <div class="d-flex justify-content-center"> <p class="col-1"></p> <p class="col-10" style="text-align: center;">Do you really want to delete this record?<br>This process cannot be undone.</p> <p class="col-1"></p> </div> <div class="row justify-content-around" style="margin: 15px 0;"> <div class="col-6 d-flex justify-content-end"> <button type="button" class="btn btn-secondary btn-lg" data-dismiss="modal">Cancel</button> </div> <div class="col-6 d-flex justify-content-start"> <button type="submit" class="btn btn-danger btn-lg" name="delNewsData">Delete</button> </div> <input type="hidden" name="delSubmitted" value="true"/> </div> </div> </form> </div> </div> </div> <!--delete news modal END--> <div class="container-fluid bg-light" style="padding: 30px 10px;"> <div class="row bg-light" style="margin: 0 35px;"> <div class="col-6"> <h5>All News</h5> </div> <div class="col-6 d-flex justify-content-end"> <button type="button" class="btn btn-primary" style="background: #1f52a3;" data-toggle="modal" data-target="#addNewsModal"><i class="fas fa-plus" style="font-size: 20px;"></i> Add News</button> </div> </div> <!--add news alert START--> <div class="row bg-light" style="margin: 15px 35px;" id="addNewsAlert"> <div class="col-12"> <div class="alert alert-success alert-dismissible fade show" role="alert" > <strong>Success!</strong> The news is added successfully! <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> </div> </div> <!--add news alert END--> <!--news table START--> <div class="card-deck" style="margin: 15px 50px;"> <?php $dbc = mysqli_connect('localhost', 'root', ''); //connect database mysqli_select_db($dbc, 'news'); //select database $query = 'SELECT * FROM news ORDER BY news_datetime DESC'; $runQuery = mysqli_query($dbc, $query); ?> <table class="table table-hover bg-light" id="manageNewsTable"> <thead class="thead-light"> <tr> <th scope="col">News ID</th> <th scope="col">News Created Datetime</th> <th scope="col">News Title</th> <th scope="col">News Details</th> <th scope="col">News Category</th> <th scope="col">News Image</th> <th scope="col">Edit/Delete</th> </tr> </thead> <?php if($runQuery){ foreach($runQuery as $row){ ?> <tbody> <tr> <td><?php echo $row['news_id']; ?></td> <td><small><?php echo $row['news_datetime'];?></small></td> <td><?php echo $row['news_title']; ?></td> <td><?php echo $row['news_details']; ?></td> <td><?php echo $row['news_category']; ?></td> <td> <a href="<?php if(empty($row['news_image'])){ echo 'https://via.placeholder.com/200x200'; }else{ echo '/205CDE/Assignment/'.$row['news_image']; } ?>" target="_blank"> <img src="<?php if(empty($row['news_image'])){ echo 'https://via.placeholder.com/200x200'; }else{ echo $row['news_image']; }?>" alt="Thumbnail News Image" class="img-thumbnail"> </a> </td> <td> <button type="button" class="btn btn-info btnEdit"><i class="fas fa-edit" style="font-size: 14px;"></i></button> <button type="button" class="btn btn-danger btnDel"><i class="fas fa-trash" style="font-size: 14px;"></i></button> </td> </tr> </tbody> <?php } }else{ echo "ERROR! No record found!"; } mysqli_close($dbc); ?> </table> </div> <!--news table END--> </div> <!--using external files--> <?php require('footer.html'); ?> </body> </html>
Comments