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