Skip to content

Instantly share code, notes, and snippets.

@michelve

michelve/index.php

Created February 17, 2016 15:02
Show Gist options
  • Save michelve/9e9a0c77efa17954cd35 to your computer and use it in GitHub Desktop.
Save michelve/9e9a0c77efa17954cd35 to your computer and use it in GitHub Desktop.
Download ZIP
PHP json
Raw
index.php
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="content">
<a href="json.php" class="button_json">load json file</a>
</div>
</div>
</body>
</html>
Raw
jason.php
<?php
$wp_json_file = file_get_contents('posts.json');
$jf_decode = json_decode($wp_json_file);
$title = $jf_decode->result->title;
$posts = $jf_decode->result->posts;
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="container">
<h1 class="main_title"><?php echo $title; ?></h1>
<div class="content">
<ul class="ul_json clearfix">
<?php
foreach ($posts as $post) {
?>
<li>
<a href="<?php echo $post->link; ?>">
<h2><?php echo $post->title; ?></h2>
<img src="<?php echo $post->img; ?>">
</a>
</li>
<?php
}
?>
</ul>
</div>
</div>
</body>
</html>
Raw
posts.json
{
"result": {
"title": "My Title",
"posts": [
{
"title": "Title 1",
"img": "https://upload.wikimedia.org/wikipedia/en/5/5c/Endgame-movie-cover.jpg",
"link": "http://www.bewebdeveloper.com/tutorial-about-how-to-create-an-rss-feed-with-php-and-mysql"
},
{
"title": "Title 2",
"img": "https://jacobboombar.files.wordpress.com/2014/03/oblivion-dvd-cover-55.jpg",
"link": "http://www.bewebdeveloper.com/tutorial-about-crop-photo-using-php-and-jquery"
},
{
"title": "Title 3",
"img": "http://www.freedesign4.me/wp-content/gallery/posters/free-movie-film-poster-the_dark_knight_movie_poster.jpg",
"link": "http://www.bewebdeveloper.com/tutorial-about-using-ajax-with-phpmysql"
},
{
"title": "Title 4",
"img": "https://someguyanth.files.wordpress.com/2008/07/hancock.jpg",
"link": "http://www.bewebdeveloper.com/tutorial-about-using-ajax-with-native-javascript"
}
]
}
}
Raw
style.css
* {
margin: 0;
padding: 0;
}
body {
padding: 10px;
background: #eaeaea;
text-align: center;
font-family: arial;
font-size: 12px;
color: #333333;
}
.container {
width: 1000px;
height: auto;
background: #ffffff;
border: 1px solid #cccccc;
border-radius: 10px;
margin: auto;
text-align: left;
}
.main_title {
background: #cccccc;
color: #ffffff;
padding: 10px;
font-size: 20px;
line-height: 20px;
}
.content {
padding: 10px;
min-height: 100px;
text-align: center;
}
.button_json {
width: 200px;
height: 30px;
display: block;
text-align: center;
background: #a3a3a3;
border: 1px solid #808080;
color: #ffffff;
border-radius: 10px;
cursor: pointer;
margin: auto;
margin-top: 20px;
font-size: 14px;
line-height: 30px;
font-weight: bold;
text-decoration: none;
}
.ul_json {
margin: auto;
padding: 10px 0 10px 10px;
}
.ul_json li {
width: 135px;
margin: 0 10px 10px 0;
padding: 5px;
list-style: none;
text-align: left;
background: #e1dfdf;
border: 1px solid #cccccc;
float: left;
}
.ul_json li:hover {
opacity: 0.5
}
.ul_json li a {
text-decoration: none;
color: #666666;
}
.ul_json li a h2 {
font-size: 14px;
font-weight: 300;
text-align: center;
margin: 5px;
padding-bottom: 5px;
}
.ul_json li a img {
width: 135px;
height: 192px;
}
.clearfix:after {
clear: both;
display: block;
content: "";
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment