Find The Perfect Property Within Your Budget

You are just few clicks away from finding the perfect property that matches your budget.

Get Started

My Blog

Welcome to XTANAL BLOG

Eirmod sed ipsum dolor sit rebum labore magna erat. Tempor ut dolore lorem kasd vero ipsum sit eirmod sit. Ipsum diam justo sed rebum vero dolor duo.

Good News

Good

<?php
include '../includes/db.php';
session_start();

// Simple authentication
if (!isset($_SESSION['admin_logged_in'])) {
header("Location: login.php");
exit();
}

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$title = $_POST['title'];
$content = $_POST['content'];
$image_caption = $_POST['image_caption'];
$image_url = null;

// Handle image upload
if (isset($_FILES['image']) && $_FILES['image']['error'] === 0) {
// Validate file type and size
$allowedExtensions = ['jpg', 'jpeg', 'png', 'gif'];
$fileExtension = strtolower(pathinfo($_FILES['image']['name'], PATHINFO_EXTENSION));
$maxSize = 5 * 1024 * 1024; // 5MB limit

if (in_array($fileExtension, $allowedExtensions) && $_FILES['image']['size'] <= $maxSize) {
$imageName = basename($_FILES['image']['name']);
$imagePath = '../assets/uploads/' . $imageName;

if (move_uploaded_file($_FILES['image']['tmp_name'], $imagePath)) {
$image_url = $imageName; // Store the file name in the database
} else {
$error = "Failed to upload image.";
}
} else {
$error = "Invalid file type or size.";
}
}

// Insert post into database
if (empty($error)) {
$stmt = $pdo->prepare("INSERT INTO posts (title, content, image_url, image_caption) VALUES (?, ?, ?, ?)");
$stmt->execute([$title, $content, $image_url, $image_caption]);
header("Location: index.php");
exit();
}
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add New Post</title>
<link rel="stylesheet" href="../assets/css/style.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>
</head>
<body>

<?php include '../includes/header.php'; ?>

<div class="container">
<h1 class="page-title">Add New Post</h1>

<?php if (isset($error)): ?>
<div class="alert error"><?= $error ?></div>
<?php endif; ?>

<form action="post_add.php" method="POST" enctype="multipart/form-data" class="post-form" id="postForm">
<div class="form-group">
<label for="title" class="label">Post Title</label>
<input type="text" name="title" id="title" class="input-field" required>
</div>

<div class="form-group">
<label for="content" class="label">Content</label>
<textarea name="content" id="content" class="input-field" rows="6" required></textarea>
</div>

<div class="form-group">
<label for="image" class="label">Upload Image</label>
<input type="file" name="image" id="image" class="input-field" accept="image/*">
</div>

<div class="form-group">
<label for="image_caption" class="label">Image Caption</label>
<input type="text" name="image_caption" id="image_caption" class="input-field">
</div>

<button type="submit" class="submit-button">Add Post</button>
</form>


<div id="croppedImagePreviewContainer" class="image-preview-container" style="display: none;">
<h3>Cropped Image Preview</h3>
<img id="croppedImagePreview" src="" alt="Cropped Image Preview" class="cropped-image">
<p id="imageCaptionPreview"></p>
</div>
</div>


<div class="modal" id="imageModal">
<div class="modal-content">
<span class="close-btn" id="closeModal">×</span>
<h2>Crop Your Image</h2>
<img id="imagePreview" src="" alt="Image Preview">
<button type="button" id="cropButton" class="submit-button">Crop and Preview</button>
</div>
</div>

<?php include '../includes/footer.php'; ?>

<script>
$(document).ready(function() {
var $image = $('#imagePreview');
var cropper;
var $croppedImagePreview = $('#croppedImagePreview');
var $imageCaptionPreview = $('#imageCaptionPreview');

// Open modal when image is selected
$('#image').on('change', function(e) {
var reader = new FileReader();
reader.onload = function(event) {
var imageUrl = event.target.result;
$('#imageModal').show();
$image.attr('src', imageUrl);
cropper = new Cropper($image[0], {
aspectRatio: 16 / 9,
viewMode: 1,
autoCropArea: 0.65
});
};
reader.readAsDataURL(this.files[0]);
});

// Close the modal
$('#closeModal').on('click', function() {
$('#imageModal').hide();
if (cropper) {
cropper.destroy();
}
});

// Handle cropping and image preview on the page
$('#cropButton').on('click', function(event) {
// Prevent form submission
event.preventDefault();

// Get cropped canvas
var canvas = cropper.getCroppedCanvas();

// Show the cropped image as a preview on the page
var croppedImageURL = canvas.toDataURL(); // Get the cropped image data URL
$croppedImagePreview.attr('src', croppedImageURL); // Display cropped image in preview container
$croppedImagePreview.show();

// Optionally, show image caption
var caption = $('#image_caption').val();
$imageCaptionPreview.text(caption); // Display the caption
$('#croppedImagePreviewContainer').show(); // Show the preview container
});
});
</script>

</body>
</html>