mirror of
https://github.com/FranP-code/Allnews.com.git
synced 2025-10-13 00:32:45 +00:00
Hecha la logica para mostrar las noticias completas. Junto con el front-end de la misma. Ademas, modificados los id de la base de datos
This commit is contained in:
@@ -1 +1 @@
|
||||
3
|
||||
6
|
||||
@@ -1 +1 @@
|
||||
./news/1.html ./news/2.html ./news/3.html
|
||||
./news/1.html ./news/2.html ./news/3.html ./news/4.html ./news/5.html ./news/6.html
|
||||
37
index.php
37
index.php
@@ -6,15 +6,24 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>All news</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="icon" href="./img/logo.svg">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<div class="name">
|
||||
<a href="index.php" class="name">
|
||||
<img class="logo" src="./img/logo.svg">
|
||||
<h1>AllNews.com</h1>
|
||||
</div>
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<noscript>
|
||||
<div class="noscript">
|
||||
Please, activate JavaScript for the correct functionality of the webpage.
|
||||
</div>
|
||||
</noscript>
|
||||
|
||||
|
||||
<div class="card-container">
|
||||
<?php
|
||||
|
||||
@@ -27,17 +36,21 @@
|
||||
$result = bring_the_news_back_home(1, $news_per_page);
|
||||
|
||||
foreach ($result as $news ) {
|
||||
$title = $news[0];
|
||||
$frist_p = $news[1];
|
||||
$icon = $news[2];
|
||||
$id = $news[0];
|
||||
$title = $news[1];
|
||||
$frist_p = $news[2];
|
||||
$icon = $news[3];
|
||||
|
||||
echo "<div class='card'>
|
||||
<img src=$icon>
|
||||
<div class='text'>
|
||||
<h2>$title</h2>
|
||||
<h3>$frist_p</h3>
|
||||
</div>
|
||||
</div>";
|
||||
echo
|
||||
"<a href='news.php?id=$id' class='card-link'>
|
||||
<div class='card'>
|
||||
<img src=$icon>
|
||||
<div class='text'>
|
||||
<h2>$title</h2>
|
||||
<h3>$frist_p</h3>
|
||||
</div>
|
||||
</div>
|
||||
</a>";
|
||||
}
|
||||
|
||||
?>
|
||||
|
||||
91
news.css
Executable file
91
news.css
Executable file
@@ -0,0 +1,91 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
background: #9dd3ff;
|
||||
background: linear-gradient(180deg, rgba(157,211,255,1) 40%, rgba(205,233,255,1) 100%);
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
header {
|
||||
padding-top: 4vh;
|
||||
padding-bottom: 4vh;
|
||||
padding-left: 3vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/*justify-content: center;*/
|
||||
color: #000000;
|
||||
user-select: none;
|
||||
border-bottom: #000000 solid 1px;
|
||||
}
|
||||
|
||||
.name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 1vh;
|
||||
text-decoration: none;
|
||||
padding-bottom: 1vh;
|
||||
}
|
||||
|
||||
.name h1 {
|
||||
font-style: italic;
|
||||
margin-left: 1vw;
|
||||
font-size: 45px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
|
||||
.logo {
|
||||
color: #62b0f0;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
|
||||
.all h1 {
|
||||
margin-bottom: 3vh;
|
||||
}
|
||||
|
||||
.all {
|
||||
margin-top: 4vh;
|
||||
padding-top: 1vh;
|
||||
margin-left: 20vw;
|
||||
padding-left: 2vw;
|
||||
margin-right: 20vw;
|
||||
padding-right: 2vw;
|
||||
border: solid #a1c7e0 1px ;
|
||||
}
|
||||
|
||||
article img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-bottom: 2vh;
|
||||
}
|
||||
|
||||
article p {
|
||||
margin-bottom: 2vh
|
||||
}
|
||||
|
||||
article h1, article h2, article h3, article h4 {
|
||||
padding-top: 2vh;
|
||||
padding-bottom: 2vh;
|
||||
}
|
||||
|
||||
article {
|
||||
font-size: 13pt;
|
||||
}
|
||||
|
||||
.source {
|
||||
margin-top: 2vh;
|
||||
padding-top: 1vh;
|
||||
margin-left: 20vw;
|
||||
padding-left: 2vw;
|
||||
margin-right: 20vw;
|
||||
padding-right: 2vw;
|
||||
margin-bottom: 2vh;
|
||||
padding-bottom: 1vh;
|
||||
border: solid #a1c7e0 1px ;
|
||||
}
|
||||
47
news.php
Executable file
47
news.php
Executable file
@@ -0,0 +1,47 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="news.css">
|
||||
<title>
|
||||
<?php
|
||||
require 'news_logic.php';
|
||||
|
||||
$requestFromDB = bring_the_choosen_one($_GET['id'])[0];
|
||||
|
||||
$title = $requestFromDB['title'];
|
||||
$content = $requestFromDB['content'];
|
||||
$author = $requestFromDB['author'];
|
||||
$page_source = $requestFromDB['page_source'];
|
||||
$icon_route = $requestFromDB['icon_route'];
|
||||
|
||||
echo $title;
|
||||
?>
|
||||
|
||||
</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<a href="index.php" class="name">
|
||||
<img class="logo" src="./img/logo.svg">
|
||||
<h1>AllNews.com</h1>
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<div class="all">
|
||||
<h1><?php echo $title;?></h1>
|
||||
|
||||
<article>
|
||||
<img src=<?php echo $icon_route?>>
|
||||
<?php echo $content;?>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="source">
|
||||
Autor: <b><?php echo $author;?></b> | Pagina fuente: <b><?php echo $page_source;?></b>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -52,7 +52,7 @@ function get_string_between($string, $start, $end){
|
||||
$ini += strlen($start);
|
||||
$len = strpos($string, $end, $ini) - $ini;
|
||||
return substr($string, $ini, $len);
|
||||
//! CREDITS: https://stackoverflow.com/questions/5696412/how-to-get-a-substring-between-two-strings-in-phphttps://stackoverflow.com/questions/5696412/how-to-get-a-substring-between-two-strings-in-php
|
||||
//! CREDITS: https://stackoverflow.com/a/9826656
|
||||
}
|
||||
|
||||
function create_entry_in_DB($news_unique, $page, $author) {
|
||||
@@ -100,7 +100,7 @@ function bring_the_news_back_home($actual_page, $news_per_page) {
|
||||
$frist_calc = $actual_page * $news_per_page;
|
||||
$second_calc = ($actual_page * $news_per_page) - $news_per_page;
|
||||
|
||||
$prepared_query = $mySQLconnect -> prepare("select title, frist_paragraph, icon_route from noticias where id < ? and id > ?");
|
||||
$prepared_query = $mySQLconnect -> prepare("select id, title, frist_paragraph, icon_route from noticias where id < ? and id > ?");
|
||||
$prepared_query -> bindParam(1, $frist_calc, PDO::PARAM_INT);
|
||||
$prepared_query -> bindParam(2, $second_calc, PDO::PARAM_INT);
|
||||
//$prepared_query -> execute(array($actual_page * 10, $actual_page * 10 - 10));
|
||||
@@ -112,4 +112,17 @@ function bring_the_news_back_home($actual_page, $news_per_page) {
|
||||
return $return;
|
||||
}
|
||||
|
||||
function bring_the_choosen_one($id) {
|
||||
require './mySQLconnect.php';
|
||||
|
||||
$prepared_query = $mySQLconnect -> prepare('select * from noticias where id = ?');
|
||||
$prepared_query -> bindParam(1, $id, PDO::PARAM_INT);
|
||||
|
||||
$prepared_query -> execute();
|
||||
|
||||
$return = $prepared_query -> fetchAll();
|
||||
|
||||
return $return;
|
||||
}
|
||||
|
||||
?>
|
||||
31
style.css
31
style.css
@@ -5,9 +5,9 @@
|
||||
|
||||
html {
|
||||
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
background-color: #9dd3ff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgb(157,211,255);
|
||||
background: linear-gradient(180deg, rgba(157,211,255,1) 40%, rgba(205,233,255,1) 100%);
|
||||
|
||||
}
|
||||
|
||||
header {
|
||||
@@ -22,18 +22,31 @@ header {
|
||||
border-bottom: #000000 solid 1px;
|
||||
}
|
||||
|
||||
.noscript {
|
||||
color: #ffffff;
|
||||
background-color: #ff5555;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-top: 5vh;
|
||||
padding-bottom: 5vh;
|
||||
font-weight: bolder;
|
||||
font-size: 15pt;
|
||||
}
|
||||
|
||||
.name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 1vh;
|
||||
padding-bottom: 1vh;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.name h1 {
|
||||
font-style: italic;
|
||||
color: #000000;
|
||||
margin-left: 1vw;
|
||||
font-size: 45px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.logo {
|
||||
@@ -42,6 +55,12 @@ header {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.card-link {
|
||||
text-decoration: inherit;
|
||||
color: inherit;
|
||||
margin-top: 3vh;
|
||||
}
|
||||
|
||||
.card-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -54,7 +73,6 @@ header {
|
||||
background-color: #ffffff;
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
margin-top: 2.5vh;
|
||||
}
|
||||
|
||||
.card .text {
|
||||
@@ -85,12 +103,13 @@ header {
|
||||
object-fit: cover;
|
||||
margin-right: 2vw;
|
||||
border-radius: 3px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
font-family: 'Times New Roman', Times, serif;
|
||||
font-weight: lighter;
|
||||
font-size: 12.5pt;
|
||||
color: #999999;
|
||||
color: #797979;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user