Scribd
Upload
19 views23 pages

Rounak Webtech Updated

Uploaded by

Rounak Naik
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
19 views23 pages

Rounak Webtech Updated

Uploaded by

Rounak Naik
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 23

ROUNAK NAIK (22CE50)

Web technology-Mini Project


Global News Portal

1) Landing Page

2) Home Page
3)Edit profile
4) Feeback

Codes:
Q1) HTML AND CSS
1) Langing Page
a) index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Global News Portal</title>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@30
0;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="categories.html">Categories</a></li>
<li><a href="about.html">About</a></li>
<li><a href="developer-info.html">Contact</a></li>
</ul>
</nav>
</header>

<main>
<section class="welcome-container">
<h1>Welcome to Global News Portal</h1>
<p>Your one-stop destination for global news across various
categories including Sports, Technology, Entertainment, and
World News.</p>
<div class="auth-buttons">
<a href="login.html" class="auth-btn">Login</a>
<a href="register.html" class="auth-btn">Register</a>
</div>
</section>

<section class="features">
<h2>Features</h2>
<ul>
<li>Real-Time Updates</li>
<li>Personalized news feed</li>
<li>Responsive Design</li>
<li>Categorized News</li>
</ul>
</section>
<section class="categories">
<h2>News Categories</h2>
<div class="categories-grid">
<div class="category-card" data-category="general">
<div class="category-icon">�</div>
<h3 class="category-title">General News</h3>
<p class="category-description">
Stay informed with the latest headlines and breaking news from
around the world.
</p>
</div>
<div class="category-card" data-category="business">
<div class="category-icon">�</div>
<h3 class="category-title">Business</h3>
<p class="category-description">
Track market trends, company updates, and economic
developments globally.
</p>
</div>
<div class="category-card" data-category="technology">
<div class="category-icon">�</div>
<h3 class="category-title">Technology</h3>
<p class="category-description">
Explore the latest innovations, gadget releases, and tech
industry updates.
</p>
</div>
<div class="category-card" data-category="sports">
<div class="category-icon">⚽</div>
<h3 class="category-title">Sports</h3>
<p class="category-description">
Get updates on matches, tournaments, and athlete achievements
across all sports.
</p>
</div>
<div class="category-card" data-category="entertainment">
<div class="category-icon">�</div>
<h3 class="category-title">Entertainment</h3>
<p class="category-description">
Keep up with celebrity news, movie releases, and entertainment
industry updates.
</p>
</div>
</div>
</section>
</main>

<footer>
<p>&copy; 2024 Global News Portal</p>
<p><a href="developer-info.html">Developer Info</a></p>
</footer>
</body>
</html>

2) Home Page

a)newindex.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Global News Portal</title>
<link rel="stylesheet" href="newstyles.css">
<script
src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.
min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #cfe0f3;
}
</style>
</head>
<body>
<header>
<h1>Global News Portal</h1>
<nav>
<div class="main_nav">
<a href="#"></a>
<img src="Matrix News.jpg" alt="Global News Hub Logo"
style="margin-right: -80px; border-radius: 50%; width: 60px;
height: 60px;">
</a>
<div id="categories">
<button class="category-btn" data-category="preferences" aria-
label="My Preferences" style="background: linear-gradient(to
right, #287597, #1f89a1,#287597); color: #f0f8ff; border: none;
padding: 10px 20px; border-radius: 5px; cursor: pointer;">My
Preferences</button>
<button class="category-btn" data-category="general" aria-
label="General News">General</button>
<button class="category-btn" data-category="business" aria-
label="Business News">Business</button>
<button class="category-btn" data-category="technology" aria-
label="Technology News">Technology</button>
<button class="category-btn" data-category="sports" aria-
label="Sports News">Sports</button>
<button class="category-btn" data-category="entertainment"
aria-label="Entertainment News">Entertainment</button>
</div>
<div class="searchbar">
<input type="text" class="search" placeholder="Search
news...">
<button class="searchbutton" aria-
label="Search">Search</button>
</div>
<div id="user-info">
<div class="user-dropdown">
<img src="user.png" alt="User Icon" class="user-icon" aria-
haspopup="true" aria-expanded="false" style="width: 50px;
height: 50px; border-radius: 50%; cursor: pointer;">
<div class="dropdown-content" aria-label="User Menu">
<span id="username"></span>
<a href="settings.html" aria-label="Settings" style="display:
block; text-align: center;">Settings</a>
<a href="search_history.php" aria-label="History"
style="display: block; text-align: center;">Search History</a>
<button id="logout-btn" aria-label="Logout" style="display:
block; text-align: center; color: red; text-decoration: none;"
onclick="logout()">Logout</button>
</div>
</div>
</div>
</div>
</nav>
</header>
<main>
<div id="news-container"></div>
</main>
<script src="newscript.js"></script>
</body>
</html>

a)edit.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<title>Edit Page</title>
<style>
body {
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #f4f4f4, #3498db);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
animation: gradientAnimation 15s ease infinite;
}

@keyframes gradientAnimation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.edit-container {
background-color: #fff;
padding: 40px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 500px;
}
.edit-container h2 {
margin-bottom: 20px;
text-align: center;
}
.edit-container input {
width: 100%;
padding: 15px;
margin: 15px 0;
border: 2px solid #ccc;
border-radius: 8px;
box-sizing: border-box;
font-size: 16px;
transition: border-color 0.3s ease;
}

.edit-container input:focus {
border-color: #3498db;
outline: none;
}
.edit-container input[type="submit"] {
background-color: #2980b9;
color: white;
border: none;
cursor: pointer;
}
.edit-container input[type="submit"]:hover {
background-color: #2573a6;
}
</style>
</head>
<body>
<div class="edit-container">
<h2>Edit Information</h2>
<form action="update_user.php" method="POST" onsubmit="return
validateForm()">
<input type="text" id="name" name="name" placeholder="Name"
required />
<input type="number" id="age" name="age" placeholder="Age"
required />
<input type="text" id="username" name="username"
placeholder="Username" required />
<input type="email" id="email" name="email"
placeholder="Email" required />
<input type="password" id="password" name="password"
placeholder="Password" required />
<input type="submit" value="Save Changes" />
<a href="settings.html" class="back-button" style="display:
block; text-align: center; margin-top: 20px; color: #3498db;
text-decoration: none; font-size: 16px;">Back to Settings</a>
</form>
<script>
function validateForm() {
const name = document.getElementById('name').value;
const username = document.getElementById('username').value;
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;

const namePattern = /^[A-Za-z\s]+$/;


const usernamePattern = /^[a-zA-Z0-9._]{3,16}$/;
const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-
zA-Z]{2,}$/;
const passwordPattern = /^.{6,}$/;

if (!namePattern.test(name)) {
alert('Name should only contain letters and optional spaces,
no numbers or special characters.');
return false;
}

const age = document.getElementById('age').value;


if (age <= 0) {
alert('Please enter a valid age.');
return false;
}

if (!usernamePattern.test(username)) {
alert('Username should be alphanumeric, can include
underscores or dots, and should be between 3 to 16
characters.');
return false;
}

if (!emailPattern.test(email)) {
alert('Please enter a valid email address.');
return false;
}

if (!passwordPattern.test(password)) {
alert('Password should be at least 6 characters long.');
return false;
}
return true;
}
</script>
</div>
</body>
</html>

c) newstyle.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

header {
background-color: #192b3c;
color: #ecf0f1;
padding: 1rem;
margin-bottom: 2rem;
border-radius: 8px;
}

h1 {
margin: 0;
text-align: center;
}

.main_nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
}

.main_nav img {
height: 50px;
margin-left: -80px;
}

#categories {
display: flex;
gap: 10px;
}

.category-btn,
.auth-btn {
background-color: #3498db;
color: white;
border: none;
padding: 10px 15px;
cursor: pointer;
transition: background-color 0.3s;
border-radius: 4px;
}

.category-btn:hover,
.auth-btn:hover {
background-color: #2980b9;
}

.searchbar {
display: flex;
margin-left: -50px;
}

.search {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px 0 0 4px;
font-size: 14px;
}

.searchbutton {
padding: 8px 12px;
background-color: #3597d9;
color: white;
border: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
font-size: 14px;
}

.searchbutton:hover {
background-color: #0056b3;
}

#news-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}

Q3)
a) newscript.js

async function fetchPreferences() {


try {
const response = await fetch("get_preferences.php");
const data = await response.json();
return data.preferences ? data.preferences.split(",") : [];
} catch (error) {
console.error("Error fetching preferences:", error);
return [];
}
}

async function fetchNewsForCategory(category) {


try {
const url = `https://newsapi.org/v2/top-
headlines?country=us&category=${category}&pageSize=5&apiKey=${
apiKey}`;
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
return data.articles;
} catch (error) {
console.error(`Error fetching ${category} news:`, error);
return [];
}
}

async function fetchPreferredNews() {


try {
const preferences = await fetchPreferences();
if (preferences.length === 0) {
return await fetchNews("general");
}

let allArticles = [];


for (const category of preferences) {
const articles = await fetchNewsForCategory(category);
allArticles = [...allArticles, ...articles];
}

displayNews(shuffleArray(allArticles));
} catch (error) {
console.error("Error fetching preferred news:", error);
newsContainer.innerHTML =
"<p>An error occurred while fetching news. Please try again
later.</p>";
}
}

async function fetchNews(category = "general", query = "") {


try {
newsContainer.innerHTML = '<div
class="loader">Loading...</div>';
let url;
if (query) {
url =
`https://newsapi.org/v2/everything?q=${query}&apiKey=${apiKey}
`;
} else {
url = `https://newsapi.org/v2/top-
headlines?country=us&category=${category}&apiKey=${apiKey}`;
}
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
displayNews(data.articles);
} catch (error) {
console.error("Error fetching news:", error);
console.error("Error details:", error.message);
newsContainer.innerHTML =
"<p>An error occurred while fetching news. Please try again
later.</p>";
}
}

function displayNews(articles) {
newsContainer.innerHTML = "";

const validArticles = articles.filter((article) => {


return !(
article.title === "[Removed]" ||
article.description === "[Removed]" ||
article.source.name === "[Removed]" ||
article.title == null ||
article.description == null ||
article.source.name == null
);
});

if (validArticles.length === 0) {
newsContainer.innerHTML =
"<p>No news articles available at the moment. Please try again
later.</p>";
return;
}
validArticles.forEach((article) => {
const newsItem = document.createElement("div");
newsItem.classList.add("news-item");
newsItem.innerHTML = `
<img src="${
article.urlToImage || "/api/placeholder/300/200"
}" alt="${article.title}" class="news-image">
<div class="news-content">
<h2 class="news-title">${article.title}</h2>
<p class="news-description">${
article.description || "No description available."
}</p>
<p class="news-source">Source: ${article.source.name}</p>
</div>
`;
newsItem.addEventListener("click", () => {
window.open(article.url, "_blank");
});
newsContainer.appendChild(newsItem);
});
}

document.addEventListener("DOMContentLoaded", () => {
fetchPreferredNews();

categoryButtons.forEach((button) => {
button.addEventListener("click", () => {
const category = button.getAttribute("data-category");
if (category === "preferences") {
fetchPreferredNews();
} else {
fetchNews(category);
}
});
});

if (searchButton) {
searchButton.addEventListener("click", () => {
const query = searchInput.value.trim();
if (query) {
saveSearchHistory(query);
fetchNews("", query);
}
});
}
});

function saveSearchHistory(query) {
const formData = new URLSearchParams();
formData.append("search_term", query);

fetch("save_search.php", {
method: "POST",
body: formData,
})
.then((response) => response.json())
.then((data) => {
console.log("Search history saved:", data);
})
.catch((error) => {
console.error("Error saving search history:", error);
});
}

function logout() {
console.log("Logout button clicked");
window.location.href = "logout.php";
}

Q4)
a) submit_feedback.php
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
session_start();
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "globalnewshub";
$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$user_id = isset($_SESSION['user_id']) ? $_SESSION['user_id'] :
null;
$rating = $_POST['rating'] ?? null;
$comment = $_POST['comment'] ?? null;
if (!$rating || !$comment) {
echo "<script>alert('Please provide both rating and comment.');
window.location.href='feedback.html';</script>";
exit();
}
$sql = "INSERT INTO feedback (user_id, rating, comment) VALUES
(?, ?, ?)";
$stmt = $conn->prepare($sql);
$stmt->bind_param("iis", $user_id, $rating, $comment);
if ($stmt->execute()) {
echo "<script>
alert('Thank you for your feedback!');
window.location.href='newindex.html';
</script>";
} else {
echo "<script>
alert('Error submitting feedback. Please try again.');
window.location.href='feedback.html';
</script>";
}
$stmt->close();
$conn->close();
?>

b) update_user.php
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);

session_start();

if (!isset($_SESSION['user_id'])) {
echo "<script>alert('You need to log in to update your
information.'); window.location.href='login.html';</script>";
exit();
}

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "globalnewshub";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

$name = $_POST['name'] ?? null;


$age = $_POST['age'] ?? null;
$username = $_POST['username'] ?? null;
$email = $_POST['email'] ?? null;
$password = $_POST['password'] ?? null;

if (!$name || !$age || !$username || !$email || !$password) {


echo "Error: Form data is missing.";
exit();
}

echo "Form data received successfully.<br>";

$hashed_password = password_hash($password, PASSWORD_DEFAULT);

$user_id = $_SESSION['user_id'];

echo "User ID from session: " . $user_id . "<br>";


$sql = "UPDATE users SET name='$name', age='$age',
username='$username', email='$email',
password='$hashed_password' WHERE id='$user_id'";
if ($conn->query($sql) === TRUE) {
echo "<script>alert('Information updated successfully!
Redirecting...');
window.location.href='newindex.html';</script>";
} else {
echo "Error updating information: " . $conn->error;
}
$conn->close();
?>

c) get_preferences.php
<?php
session_start();

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "globalnewshub";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
die(json_encode(['error' => 'Connection failed']));
}

$user_id = isset($_SESSION['user_id']) ? $_SESSION['user_id'] :


null;

if ($user_id) {
$stmt = $conn->prepare("SELECT preferences FROM users WHERE id
= ?");
$stmt->bind_param("i", $user_id);
$stmt->execute();
$result = $stmt->get_result();
if ($row = $result->fetch_assoc()) {
echo json_encode(['preferences' => $row['preferences']]);
} else {
echo json_encode(['preferences' => '']);
}
$stmt->close();
} else {
echo json_encode(['preferences' => '']);
}

$conn->close();
?>

Q5)

MYSQLDatabase

You might also like