Most of my content in the database is recorded in this way. How can this be translated into HTML code structure?
<div class="main_title mb-4">n <h2>New Arrival</h2>n <span>Products</span>n <p>Cum doctus civibus efficiantur in imperdiet deterruisset.</p>n </div>n <div class="isotope_filter">n <ul><li><a href="http://www.example.com/index-2.html#0" id="all" data-filter="*">All</a></li><li><a href="http://www.example.com/index.html#0" id="popular" data-filter=".popular">Popular</a></li><li><a href="http://www.example.com/index-2.html#0" id="sale" data-filter=".sale">Sale</a></li></ul>n </div>
Convert to:
<div class="main_title mb-4">n <h2>New Arrival</h2>n <span>Products</span>n <p>Cum doctus civibus efficiantur in imperdiet deterruisset.</p>n </div>n <div class="isotope_filter">n <ul><li>All</li><li>Popular</li><li>Sale</li></ul>n </div>
You could use html_entity_decode():
$str = '<div class="main_title mb-4">n <h2>New Arrival</h2>n <span>Products</span>n <p>Cum doctus civibus efficiantur in imperdiet deterruisset.</p>n </div>n <div class="isotope_filter">n <ul><li><a href="http://www.example.com/index-2.html#0" id="all" data-filter="*">All</a></li><li><a href="http://www.example.com/index.html#0" id="popular" data-filter=".popular">Popular</a></li><li><a href="http://www.example.com/index-2.html#0" id="sale" data-filter=".sale">Sale</a></li></ul>n </div>';
echo html_entity_decode($str);
output:
<div class="main_title mb-4">n <h2>New Arrival</h2>n <span>Products</span>n <p>Cum doctus civibus efficiantur in imperdiet deterruisset.</p>n </div>n <div class="isotope_filter">n <ul><li>All</li><li>Popular</li><li>Sale</li></ul>n </div>
Related
The html inside the main tag is not displaying but when I inspect the code, the html is there. This happens after I added the get_header function which gets a new header that is only for the front-page (other pages will get the normal header). The header and the footer are displaying without issues, only some listed items in the hero section aren't displaying either. I'm new to Wordpress and PHP, what is the best way to fix this?
My header-new.php code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Title</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Montserrat:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<?php wp_head();?>
</head>
<body>
<!-- ======= Hero Section ======= -->
<section id="hero">
<div class="hero-container">
<img src ="<?php bloginfo('template_directory');?>/assets/img/light-logo.png" alt="Logo" class="img-fluid hero-logo" data-aos="zoom-in">
<ul data-aos="fade-up">
<li>Listed Item 1</li>
<li>Listed Item 2</li>
<li>Listed Item 3</li>
<li>Listed Item 4</li>
</ul>
<a data-aos="fade-up" href="#about" class="btn-get-started scrollto">Learn More</a>
</div>
</section><!-- End Hero -->
<!-- ======= Header ======= -->
<header id="header" class="d-flex align-items-center">
<div id="navbar-container">
<div class="logo d-block d-lg-none">
<img src="<?php bloginfo('template_directory');?>/assets/img/dark-logo.png" alt="Maite Richert Logo" class="img-fluid">
</div>
<nav class="nav-menu d-none d-lg-block">
<ul class="nav-inner">
<li class="active">Meet Me</li>
<li class="drop-down">Programs
<ul>
<li>One-to-one Coaching</li>
<li>Posing Lessons</li>
</ul>
</li>
<li class="nav-logo"><img src="<?php bloginfo('template_directory');?>/assets/img/dark-logo.png" alt="Logo" class="img-fluid logo-image"></li>
<li>Shop</li>
<li>Contact</li>
</ul>
</nav><!-- .nav-menu -->
</div>
</header><!-- End Header -->
<main id="main">
My footer.php code:
</main><!-- End #main -->
<!-- ======= Footer ======= -->
<footer id="footer">
<div class="footer-top">
<div class="container">
<div class="social-links">
<img src="<?php bloginfo('template_directory');?>/assets/img/tiktok.png" alt="TikTok Icon" class="tiktok">
<i class="bx bxl-instagram"></i>
<i class='bx bxl-youtube'></i></i>
</div>
</div>
</div>
<div class="container footer-bottom clearfix">
<div class="copyright">
© <strong><span>Maite Richert</span></strong>. All Rights Reserved. 2020
</div>
</div>
</footer><!-- End Footer -->
<i class="icofont-simple-up"></i>
<?php wp_footer();?>
</body>
</html>
And my front-page.php code:
<!-- ======= About Us Section ======= -->
<section id="about" class="about">
<div class="container">
<div class="section-title" data-aos="fade-up">
<h2>Meet Me</h2>
</div>
<div class="row">
<div class="col-lg-6" data-aos="fade-right">
<div class="image">
<img src="<?php bloginfo('template_directory');?>/assets/img/maite.jpg" class="img-fluid" alt="Fitness Coach">
</div>
</div>
<div class="col-lg-6" data-aos="fade-left">
<div class="content pt-4 pt-lg-0 pl-0 pl-lg-3 ">
<h3>Hi, I'm Maite</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<ul>
<li><i class="bx bx-check"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="bx bx-check"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="bx bx-check"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="bx bx-check"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="bx bx-check"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
</div>
</div>
</div>
</div>
</section><!-- End About Us Section -->
<!-- ======= Services Section ======= -->
<section id="services" class="services">
<div class="container">
<div class="section-title" data-aos="fade-up">
<h2>Programs</h2>
</div>
<div class="row" style="margin-bottom: 10vh;">
<div class="col-lg-6 order-2 order-lg-1 services-box">
<div class="icon-box mt-5 mt-lg-0" data-aos="fade-up">
<i class="icofont-muscle-weight"></i>
<h4>One-to-one coaching</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="learn-more-btn">Learn More</div>
</div>
<div class="icon-box mt-5" data-aos="fade-up" data-aos-delay="100">
<i class="icofont-trophy"></i>
<h4>Posing Coach</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="learn-more-btn">Learn More</div>
</div>
</div>
<div class="col-lg-6 order-1 order-lg-2" data-aos="fade-left" data-aos-delay="100"><img class="img-fluid" src="<?php bloginfo('template_directory');?>/assets/img/services.jpg" alt="Fitnees posing"></div>
</div>
</div>
</section><!-- End Services Section -->
<!-- ======= Why Us Section ======= -->
<section id="why-us" class="why-us">
<div class="container">
<div class="row">
<div class="col-lg-12 order-2 order-lg-1 d-flex flex-column justify-content-center align-items-stretch">
<div class="content" data-aos="fade-up">
<h3><b>Why should you choose me?</b></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<h4>How can you help you?</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<h4>Will this work for you?</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<h4>Aren't all the personal trainers the same?</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</section><!-- End Why Us Section -->
<!-- ======= Sponsors Section ======= -->
<section id="sponsors" class="sponsors">
<div class="container">
<h3>Sponsors</h3>
<div class="row sponsor-img-container">
<div class="col-lg-2 col-md-4 col-6" data-aos="zoom-in" data-aos-delay="400">
<img src="<?php bloginfo('template_directory');?>/assets/img/sponsors/sponsor-5-1.png" id="womens-best" class="img-fluid" alt="Women's Best">
</div>
<div class="col-lg-2 col-md-4 col-6" data-aos="zoom-in" data-aos-delay="500">
<img src="<?php bloginfo('template_directory');?>/assets/img/sponsors/sponsor-6.png" class="img-fluid" alt="Ryderwear">
</div>
<div class="col-lg-2 col-md-4 col-6" data-aos="zoom-in" data-aos-delay="300">
<img src="<?php bloginfo('template_directory');?>/assets/img/sponsors/sponsor-4-1.png" id="wbff" class="img-fluid" alt="WBFF">
</div>
<div class="col-lg-2 col-md-4 col-6" data-aos="zoom-in" data-aos-delay="100">
<img src="<?php bloginfo('template_directory');?>/assets/img/sponsors/sponsor-2.png" class="img-fluid" alt="FitGriff">
</div>
<div class="col-lg-2 col-md-4 col-6" data-aos="zoom-in" data-aos-delay="200">
<img src="<?php bloginfo('template_directory');?>/assets/img/sponsors/sponsor-3-1.png" id="f4" class="img-fluid" alt="Factory 4">
</div>
<div class="col-lg-2 col-md-4 col-6" data-aos="zoom-in">
<img src="<?php bloginfo('template_directory');?>/assets/img/sponsors/sponsor-1.png" class="img-fluid" alt="Basic Fit">
</div>
</div>
</div>
</section><!-- End Sponsors Section -->
<!-- ======= Contact Section ======= -->
<section id="contact" class="contact section-bg">
<div class="container">
<div class="section-title">
<h2>Contact</h2>
<p>If you are interested in my services or if you have any questions, don't hesitate to contact me!</p>
</div>
<div class="row">
<div class="col-lg-8 mt-5 mt-lg-0 form-box">
<form action="forms/contact.php" method="post" role="form" class="php-email-form" data-aos="fade-left">
<div class="form-row">
<div class="col-md-6 form-group">
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
<div class="validate"></div>
<p>So I can get to know you better.</p>
</div>
<div class="col-md-6 form-group">
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
<div class="validate"></div>
<p>Only to reply you back. No marketing.</p>
</div>
</div>
<div class="form-group" style="padding-bottom: 2rem;">
<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
<div class="validate"></div>
</div>
<div class="form-group">
<textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
<div class="validate"></div>
</div>
<div class="mb-3">
<div class="loading">Loading</div>
<div class="error-message"></div>
<div class="sent-message">Your message has been sent. Thank you!</div>
</div>
<div class="text-center form-btn-container"><button type="submit">Send Message</button></div>
</form>
</div>
</div>
</div>
</section><!-- End Contact Section -->
<?php get_footer();?>
This is not a direct answer to your question, but it may solve your problem, so I hope the answer is helpful for you.
If you only want to add a hero section to your front page, I think you do not need a page template and header template only for this one case. You could add a if clause inside of your default header.php checking if you are on frontpage. If it is true, your hero section is being inserted:
<body>
<?php if (is_front_page()) { ?>
<!-- ======= Hero Section ======= -->
<section id="hero">
<div class="hero-container">
<img src ="<?php bloginfo('template_directory');?>/assets/img/light-logo.png" alt="Logo" class="img-fluid hero-logo" data-aos="zoom-in">
<ul data-aos="fade-up">
<li>Listed Item 1</li>
<li>Listed Item 2</li>
<li>Listed Item 3</li>
<li>Listed Item 4</li>
</ul>
<a data-aos="fade-up" href="#about" class="btn-get-started scrollto">Learn More</a>
</div>
</section><!-- End Hero -->
<?php } ?>
.
.
.
This would be my solution. Does it work for you? If not, try chaning the content of your hero-container to check if something is wrong with this code. Just add a <p>test</p> to see that the if clause is working and that only the frontpage is outputting the paragraph with "test".
If you want to have a different page template (maybe because there are more pages you want to show the hero section), make sure you use the right file names to make wordpress template hierarchy work: https://developer.wordpress.org/themes/basics/template-hierarchy/
Page Template can be created with copying the page.php, renaming it page-frontpage.php and adding /* Template Name: Frontpage */ at the top of it. Go to your wordpress backend and edit your frontpage. On the right side under "page attributes" select the created page template.
Inside of your page-frontpage.php change the get_header() function to:
get_header('frontpage');
Then create a copy of your header.php and name it "header-frontpage.php".
Now every page that has the "frontpage" page template, will use the header with the name "frontpage". In the header-frontpage.php you make your changes.
For me a template only makes sense, if it is applied to more pages. For one case, you can do more easy and faster using an if clause.
Hope this can help you.
im working on my crud skills, but im having some trouble. the first page shows a list of all blog posts, when the user clicks on read more it sends the specific posts id through the url and is recieved by the destination page which uses that id to display the single post/ heres the code for that part. it actually works fine
function display_single_post($title,$author,$date,$image,$content){
$main_page_blog_html = "<h2>
<a href='#'>%s</a>
</h2>
<p class='lead'>
by <a href='index.php'>%s</a>
</p>
<p><span class='glyphicon glyphicon-time'></span> Posted on %s</p>
<hr>
<img class='img-responsive' src='images/%s'>
<hr>
<p>%s</p>
<hr>
<hr>";
printf("{$main_page_blog_html}",$title,$author,$date,$image,$content);
if(isset($_GET["id"])){
$id = $_GET["id"];
$stmt = $connect->link->query("SELECT * FROM posts WHERE post_id = $id");
while($row = $stmt->fetch()){
$post_title = $row["post_title"];
$post_author = $row["post_author"];
$post_date = date('F j, Y \a\t g:ia', strtotime( $row["post_date"] ));
$post_image = $row["post_image"];
$post_content = $row["post_content"];
$id = $row["post_id"];
display_single_post($post_title,$post_author,$post_date,$post_image,$post_content);
}
}
like i said this all works fine. the get value is recieved and loads the post. the problem is when i try to use that $_get id in a query to insert a comment. all this code is on the one page im just showing the php without the html. anyway heres the code to insert the comment
if(isset($_POST["create_comment"])){
global $connect;
$post_id = $_GET["id"];
$comment_author = $_POST["comment_author"];
$author_email = $_POST["author_email"];
$comment_content = $_POST["comment_content"];
$comment_status = "pending";
edit with all the code
<div class="container">
<div class="row">
<!-- Blog Entries Column -->
<div class="col-md-8">
<h1 class="page-header">
Page Heading
<small>Secondary Text</small>
</h1>
<!-- First Blog Post -->
<?php
$connect = new db();
if(isset($_POST["create_comment"])){
global $connect;
echo "hello";
$post_id = $_GET["id"];
$comment_author = $_POST["comment_author"];
$author_email = $_POST["author_email"];
$comment_content = $_POST["comment_content"];
$comment_status = "pending";
$sql = "INSERT INTO comments(comment_post_id, comment_author, comment_email, comment_content, comment_status)
VALUES(:a,:b,:c,:d,:e)";
$stmt = $connect->link->prepare($sql);
$stmt->bindvalue(":a",$post_id);
$stmt->bindvalue(":b", $comment_author);
$stmt->bindvalue(":c",$author_email);
$stmt->bindvalue(":d",$comment_content);
$stmt->bindvalue(":e",$comment_status);
$stmt->execute();
}
function display_single_post($title,$author,$date,$image,$content){
$main_page_blog_html = "<h2>
<a href='#'>%s</a>
</h2>
<p class='lead'>
by <a href='index.php'>%s</a>
</p>
<p><span class='glyphicon glyphicon-time'></span> Posted on %s</p>
<hr>
<img class='img-responsive' src='images/%s'>
<hr>
<p>%s</p>
<hr>
<hr>";
printf("{$main_page_blog_html}",$title,$author,$date,$image,$content);
}
if(isset($_GET["id"])){
$id = $_GET["id"];
$stmt = $connect->link->query("SELECT * FROM posts WHERE post_id = $id");
while($row = $stmt->fetch()){
$post_title = $row["post_title"];
$post_author = $row["post_author"];
$post_date = date('F j, Y \a\t g:ia', strtotime( $row["post_date"] ));
$post_image = $row["post_image"];
$post_content = $row["post_content"];
$id = $row["post_id"];
display_single_post($post_title,$post_author,$post_date,$post_image,$post_content);
}
}
?>
<hr>
<!-- Blog Comments -->
<!-- Comments Form -->
<div class="well">
<h4>Leave a Comment:</h4>
<form role="form" method="post" action="post.php">
<div class="form-group">
<input type="text" class="form-control" name="comment_author" placeholder="name">
</div>
<div class="form-group">
<input type="email" class="form-control" name="author_email" placeholder="email">
</div>
<div class="form-group">
<textarea class="form-control" rows="3" name="comment_content"></textarea>
</div>
<button type="submit" name="create_comment" class="btn btn-primary">Submit</button>
</form>
</div>
<hr>
<!-- Posted Comments -->
<!-- Comment -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://placehold.it/64x64" alt="">
</a>
<div class="media-body">
<h4 class="media-heading">Start Bootstrap
<small>August 25, 2014 at 9:30 PM</small>
</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
<!-- Comment -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://placehold.it/64x64" alt="">
</a>
<div class="media-body">
<h4 class="media-heading">Start Bootstrap
<small>August 25, 2014 at 9:30 PM</small>
</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<!-- Nested Comment -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://placehold.it/64x64" alt="">
</a>
<div class="media-body">
<h4 class="media-heading">Nested Start Bootstrap
<small>August 25, 2014 at 9:30 PM</small>
</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
<!-- End Nested Comment -->
</div>
</div>
</div>
Based on your code and your comments, I assume the page is called post.php and when you first reach the page it has the id on the url like this: post.php?id=156.
But once you submit the comments' form, since the action for said form it is simply post.php you're losing the id.
You could add the id on the action after post:
<form role="form" method="post" action="post.php?id=<?php echo $id; ?>">
or add a hidden input with the id:
<input type="hidden" name="id" value="<?php echo $id; ?>">
But then you'd have to reach it with $_POST
Another option is to use the SELF for the action like this:
<form role="form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
This will retain the id but also any other get variables you may have on the url.
//EDIT
This is a simplification of the probelm which is working, if you visit post.php?id=456 (or any number) and then press Submit, you get the proper response:
<!-- First Blog Post -->
<?php
if(isset($_POST["create_comment"])){
$post_id = $_GET["id"];
echo "The id is: $post_id";
// gets comment and inserts into the db
}
if(isset($_GET["id"])){
$id = $_GET["id"];
// calls display_single_post
}
?>
<!-- Comments Form -->
<div class="well">
<h4>Leave a Comment:</h4>
<form role="form" method="post" action="post.php?id=<?php echo $id; ?>">
<button type="submit" name="create_comment" class="btn btn-primary">Submit</button>
</form>
</div>
I am using the bootstrap framework for layout on my system. I want to arrange the layout of the page like this(See image below)
But I am facing a challenge. My code is showing this (See image below)
I need the Login forum section to go to the right like on the first picture that i have uploaded.
This is my code
<?php if($topics) : ?>
<p id="topics">
<div class="row">
<?php foreach ($topics as $topic) : ?>
<p class="topic">
<div class="row">
<div class="col">
</div>
<div class="col-md-5">
<div class="topic-content pull-right">
<h3><?php echo $topic['title']; ?></h3>
<div class="topic-info">
<?php echo $topic['name']; ?> >>
<?php echo $topic['username']; ?> >>
Posted on: <?php echo formatDate($topic['create_date']); ?>
<span class="badge pull-right"><?php echo replyCount($topic['id']); ?></span>
</div>
</div>
</div>
</div>
</p>
<?php endforeach; ?>
</p>
<?php else : ?>
<p>No Topics to Display.</p>
<?php endif; ?>
<div class="col-md-4" align="pull-right">
<div class="sidebar">
<div class="block">
<h3>Login Form</h3>
<?php if(isLoggedIn()) : ?>
<div class="userdata">
Logged in as <?php echo getUser()['username']; ?>
</div>
<br />
<form role="form" method="post" action="logout.php">
<input type="submit" name="do_logout" class="btn btn-default" value="Log Out" />
<hr>
<h4>All Topics</h4>
<h4>Create Topic</h4>
</form>
<?php else : ?>
<form role="form" method="post" action="login.php">
<div class="form-group">
<label>Username</label>
<input name="username" type="text" class="form-control" placeholder="Enter Username" />
</div>
<div class="form-group">
<label>Password</label>
<input name="password" type="password" class="form-control" placeholder="password" />
</div>
<button name="do_login" type="submit" class="btn btn-primary">Login</button> <a class="btn btn-default" href="register.php">Create Account</a>
</form>
<?php endif; ?>
</div>
<div class="block">
<h3>Categories</h3>
<div class="list-group">
All topics <span class="badge pull-right"><?php echo totalPostCount() ;?></span>
<?php foreach(getCategories() as $category) : ?>
<a href="topics.php?category=<?php echo $category['id']; ?>" class="list-group-item <?php echo is_active($category['id']); ?>">
<?php echo $category['name']; ?>
<span class="badge pull-right">
<?php echo postCountByCategory($category['id']) ;?>
</span>
</a>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
</div>
<hr>
<h3>Forum Statistics</h3>
<p>
<h6>Total Number of Users: <strong><?php echo $totalUsers; ?></strong></li>
<h6>Total Number of Topics: <strong><?php echo $totalTopics; ?></strong></li>
<h6>Total Number of Categories: <strong><?php echo $totalCategories; ?></strong></li>
</ul>
There seems to be plenty of unnecessary rows and <p> tags within other <p> tags. It needs a restructure to be honest. It is best practice not to wrap divs inside <p> tags as they shouldn't really be used as a wrapper.
You want to separate the 2 columns into 2 separate Bootstrap cols which should be wrapped inside a row class.
For example:
<div class="row">
<div class="col-xs-12 col-sm-8">
<p>All your forum info here etc.</p>
</div>
<div class="col-xs-12 col-sm-4">
*Login Form Here*
*Categories Here*
</div>
</div>
The columns above will separate them into 66.66666667% by 33.33333333% width columns on desktop and then both full width (100%) on smaller devices.
you can simply use the bootstrap grid Grid system to achieve this task. Please checkout the official documentation through this link...
https://getbootstrap.com/docs/4.1/layout/grid/
However, I created a sample layout that I think fit to your requirement.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">
<title>sample web page</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<style type="text/css">
.left-block{
width:100%;
height:500px;
padding: 20px;
}
.right-block{
width:100%;
padding: 20px;
height:500px;
background-color: #D3D3D3;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-8">
<div class="left-block">
<h1>sample content</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ullamcorper nisl ut sodales tincidunt. Praesent tristique lobortis tincidunt. Cras aliquet, lectus ut facilisis tempor, nulla felis porta sem, quis pulvinar lacus justo eget sapien. Integer dapibus bibendum sodales. Sed semper sagittis ex, et suscipit odio luctus vel. Fusce laoreet a sapien vitae mattis. Quisque ligula massa, sagittis vel odio vel, hendrerit iaculis leo. Aliquam erat volutpat. Fusce mollis, augue vel egestas tristique, nunc ligula placerat erat, sed venenatis elit ex et nulla. </p>
</div>
</div>
<div class="col-lg-4">
<div class="right-block">
<h2>Login Section</h2>
<hr>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
still you have any problem, feel free to add a comment below...
Dont put structural divs inside a <p> tag! Try this:
<div class="container">
<div class="row">
<div class="col-md-4">
This is one third of the page wide (4/12)
</div>
<div class="col-md-8">
This is two thirds of the page wide (8/12)
</div>
</div>
</div>
<div class="col-md-12">
<div class="row">
<div class="col-md-8">
<p> this is where 'normalization' text should go </p>
</div>
<div class="col-md-4">
<p> this is where the form goes </p>
</div>
</div>
</div>
Try above code. This is an example of basic bootstrap grid layout. The first define the page as '12' - the remaining divs inside this must add up to 12 also, this example is 8 + 4 ( 2 columns ) but can also have 3 4+4+4 and so on.
You can use the following example to arrange the web page layout with Bootstrap:
<div class="col-md-12">
<div class="row">
<div class="col-md-8">
<p> Your Left area put here </p>
</div>
<div class="col-md-4">
<p> Your right area Put here </p>
</div>
</div>
</div
I am trying to display the code of a php file as plain html. This is all going well except for that fact that I would like it to 'open up' the <?php require 'Main_content_bar.php'; ?> statements aswell.
So far I have show_source($page); correctly working.
It currently prints:
<?php require 'Main_content_bar.php'; ?>
<!-- Jumbotron -->
<div class="jumbotron">
<h1>Property</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus
commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet.</p>
</div>
<div class="row">
<div class="col-md-12">
<h2>Current properties</h2>
</div>
</div>
<div class="footer">
<p><a href="Source_code.php" target="_blank"> <img src="Images/codebutton<?php echo $page_lower;?>.jpg" alt="<?php echo $page;?> Source"> </img>
</a></p>
<p>© Robin B'stards Retail 2014</p>
</div>
</body>
</html>
However, as one can see, the contents of the require statements do not show. I cannot for the life of me work out how to do this.
So what it would end up looking like is something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/css/bootstrapValidator.min.css"/>-->
<!-- <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/js/bootstrapValidator.min.js"></script>-->
<link href="justified-nav.css" rel="stylesheet">
<script>
$(function(){
var url = window.location.href;
var page = url.substr(url.lastIndexOf('/')+1);
$('.nav a[href*="'+page+'"]').parent().addClass('active');
});
</script>
</head>
<body>
<div class="container" style="width: 1263px">
<div class="masthead">
<h3 class="text-muted">Ruthless Real Estate</h3>
<ul class="nav nav-justified">
<li class="menu">Property</li>
<li class="menu">Client</li>
<li class="menu">Type</li>
<li class="menu">Feature</li>
<li class="menu">Multiple Properties</li>
<li class="menu">Property Features</li>
<li class="menu">Images</li>
</ul>
</div>
<!-- Jumbotron -->
<div class="jumbotron">
<h1>Property</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus
commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet.</p>
</div>
<div class="row">
<div class="col-md-12">
<h2>Current properties</h2>
</div>
</div>
<div class="footer">
<p><a href="Source_code.php" target="_blank"> <img src="Images/codebutton<?php echo $page_lower;?>.jpg" alt="<?php echo $page;?> Source"> </img>
</a></p>
<p>© Robin B'stards Retail 2014</p>
</div>
</body>
</html>
Note the lack of require statements
You cannot do that with show_source, which just "show some code sources" of a file.
You need to create your own function which take a filename in argument, then you have to analyze the source like this:
replace all require/include/require_once/include_once (what do I forget?) by their own content
make the function recursive (because Main_content_bar.php can have other include inside it)
Use highlight_string at the end of your function.
EDIT to search & replace, one way (there is several) is to use preg_match_all. That part of the code would look like this :
$new_content = file_get_contents('your-file.php');
$base_path = __DIR__.'/';
// pattern to find require, require_once, include, include_once functions
// and catch their arguments
$pattern = "#<\?php (?:require|include(?:_once)?)\s*'(.*)'; \?>#u";
if (preg_match_all($pattern, $new_content, $matches))
{
foreach($matches[0] as $pattern_index => $full_pattern)
{
$file = $matches[1][$pattern_index];
$subcontent = file_get_contents($base_path.$matches[$pattern_index]);
$new_content = str_replace($new_content, $full_pattern, $subcontent);
}
}
highlight_string($new_content);
I have two forms on my page. One is in the footer which I cannot change. The second is in my main page. Confused? I hope not.
When I open the style-demo page (link below) you can see that the information belonging in the Footer form is partially entered into the comment form on the page.
The Form in the footer works correctly however the comment section does not.
Any help to have both work would be greatly appreciated.
Thank you.
Here are my links
http://richardtamm.com/includes/footer.php
http://richardtamm.com/style-demo.php
Here is the code
Footer
<div class="wrapper">
<div id="footer" class="clear">
<div class="fl_left">
<div id="about_us" class="border">
<h2>About R. Tamm</h2>
<p>Richard Tamm is an avid photographer and writer. Richard was born in the state of Michigan and currently lives in the state of Indiana. He is married with 4 wonderful children who love to call him daddy. </p>
<p>When not writing or taking photographs Richard enjoys watching movies and spending quality time with his family.</p>
</div>
<div id="contact" class="clear">
<h2>Contact Us</h2>
<div class="fl_left">
<form name="contactform" method="post" action="send_form_email.php">
<label for="first_name">First Name:</label>
<input type="text" name="first_name" id="first_name" value="">
<label for="last_name">Last Name:</label>
<input type="text" name="last_name" id="last_name" value="">
<label for="email">Email:</label>
<input type="text" name="email" id="email" value="">
<label for="comments">Message:</label>
<textarea name="comments" id="comments" cols="45" rows="10"></textarea>
<button type="submit" value="submit"><span>Submit</span></button>
</form>
</div>
<div class="fl_right">
<address>
<strong class="title">Company Name</strong><br>
Richard Tamm<br>
EYE-TO-IMAGE<br>
Jasonville, Indiana<br>
47438
</address>
<ul>
<!--<li><strong class="title">Tel:</strong><br>
xxxxx xxxxxxxxxx</li>
<li><strong class="title">Fax:</strong><br>
xxxxx xxxxxxxxxx</li>-->
<li><strong class="title">Email:</strong><br>
<?php echo $emailaddress; ?></li>
</ul>
</div>
</div>
</div>
<!-- ####################################################################################################### -->
<div class="fl_right">
<div id="tabcontainer" class="border">
<ul id="tabnav">
<li>From The Blog</li>
<li>Latest Tweets</li>
<li class="last">Link Share</li>
</ul>
<div id="tabs-1" class="tabcontainer">
<script src="layout/scripts/blogfeed.setup.js"></script>
<script src="http://widget.feed.mikle.com/js/rssmikle.js"></script>
<div style="font-size:10px; text-align:right;">RSS widget</div>
</div>
<!-- ########### -->
<div id="tabs-2" class="tabcontainer">
<a class="twitter-timeline" href="https://twitter.com/rltamm" data-widget-id="435882309061865472">Tweets by #rltamm</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<!-- ########### -->
<div id="tabs-3" class="tabcontainer">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
</div>
<h2>Keep Up To Date</h2>
<ul class="socialize">
<li><span>Facebook:</span> www.facebook.com/rltamm</li>
<li class="last"><span>Twitter:</span> www.twitter.com/rltamm</li>
</ul>
</div>
</div>
<div id="backtotop">To The Top <span class="icon-arrow-up"></span></div>
</div>
<!-- ####################################################################################################### -->
<div class="wrapper">
<div id="copyright" class="clear">
<p class="fl_left">Copyright © 2011 - 2014 All Rights Reserved - <?php echo $sitename; ?></p>
<p class="fl_right">Website by <?php echo $sitename; ?> & <a target="_blank" href="http://www.os-templates.com/" title="Free Website Templates">OS Templates</a></p>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script src="layout/scripts/jquery.defaultvalue.js"></script>
<script src="layout/scripts/jquery.scrollTo-min.js"></script>
<script>
$(document).ready(function () {
$("#first_name, #last_name, #email, #comments").defaultvalue("First Name", "Last Name", "Email", "Message");
$('a.topOfPage').click(function () {
$.scrollTo(0, 1200);
return false;
});
$("#tabcontainer").tabs({
event: "click"
});
});
</script>
<script src="layout/scripts/jquery-prettyPhoto.js"></script>
<script src="layout/scripts/jquery-prettyPhoto-setup.js"></script>
Main Page
<?php
$titletag = 'Bookshelf - Page 1';
$metdescr = 'This is the SEO description - not too long not to short used in Google search results';
include_once($_SERVER["DOCUMENT_ROOT"].'/includes/header.php');
?>
<!-- ####################################################################################################### -->
<div class="wrapper col4">
<div id="container" class="clear">
<!-- ####################################################################################################### -->
<?php include_once($_SERVER["DOCUMENT_ROOT"].'/includes/shout.php'); ?>
<!-- ####################################################################################################### -->
<!-- ####################################################################################################### -->
<div id="content">
<h1><h1> to <h6> - Headline Colour and Size Are All The Same</h1>
<img class="imgr" src="images/demo/imgr.gif" alt="" width="125" height="125" />
<p>Aliquatjusto quisque nam consequat doloreet vest orna partur scetur portortis nam. Metadipiscing eget facilis elit sagittis felisi eger id justo maurisus convallicitur.</p>
<p>Dapiensociis temper donec auctortortis cumsan et curabitur condis lorem loborttis leo. Ipsumcommodo libero nunc at in velis tincidunt pellentum tincidunt vel lorem.</p>
<img class="imgl" src="images/demo/imgl.gif" alt="" width="125" height="125" />
<p>This is a W3C compliant free website template from OS Templates. This template is distributed using a Website Template Licence.</p>
<p>You can use and modify the template for both personal and commercial use. You must keep all copyright information and credit links in the template and associated files. For more CSS templates visit Free Website Templates.</p>
<p>Portortornec condimenterdum eget consectetuer condis consequam pretium pellus sed mauris enim. Puruselit mauris nulla hendimentesque elit semper nam a sapien urna sempus.</p>
<h2>Table(s)</h2>
<table summary="Summary Here" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
</tr>
</thead>
<tbody>
<tr class="light">
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
</tr>
<tr class="dark">
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
</tr>
<tr class="light">
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
</tr>
<tr class="dark">
<td>Value 13</td>
<td>Value 14</td>
<td>Value 15</td>
<td>Value 16</td>
</tr>
</tbody>
</table>
<div id="comments">
<h2>Comments</h2>
<ul class="commentlist">
<li class="comment_odd">
<div class="author"><img class="avatar" src="images/demo/avatar.gif" width="32" height="32" alt="" /><span class="name">A Name</span> <span class="wrote">wrote:</span></div>
<div class="submitdate">August 4, 2009 at 8:35 am</div>
<p>This is an example of a comment made on a post. You can either edit the comment, delete the comment or reply to the comment. Use this as a place to respond to the post or to share what you are thinking.</p>
</li>
<li class="comment_even">
<div class="author"><img class="avatar" src="images/demo/avatar.gif" width="32" height="32" alt="" /><span class="name">A Name</span> <span class="wrote">wrote:</span></div>
<div class="submitdate">August 4, 2009 at 8:35 am</div>
<p>This is an example of a comment made on a post. You can either edit the comment, delete the comment or reply to the comment. Use this as a place to respond to the post or to share what you are thinking.</p>
</li>
<li class="comment_odd">
<div class="author"><img class="avatar" src="images/demo/avatar.gif" width="32" height="32" alt="" /><span class="name">A Name</span> <span class="wrote">wrote:</span></div>
<div class="submitdate">August 4, 2009 at 8:35 am</div>
<p>This is an example of a comment made on a post. You can either edit the comment, delete the comment or reply to the comment. Use this as a place to respond to the post or to share what you are thinking.</p>
</li>
</ul>
</div>
<h2>Write A Comment</h2>
<div id="respond">
<form action="#" method="post">
<p>
<input type="text" name="name" id="name" value="" size="22" />
<label for="name"><small>Name (required)</small></label>
</p>
<p>
<input type="text" name="email" id="email" value="" size="22" />
<label for="email"><small>Mail (required)</small></label>
</p>
<p>
<textarea name="comment" id="comment" cols="100%" rows="10"></textarea>
<label for="comment" style="display:none;"><small>Comment (required)</small></label>
</p>
<p>
<input name="submit" type="submit" id="submit" value="Submit Form" />
<input name="reset" type="reset" id="reset" tabindex="5" value="Reset Form" />
</p>
</form>
</div>
</div>
<div id="column">
<div class="subnav">
<h2>Secondary Navigation</h2>
<ul>
<li>Open Source Templates</li>
<li>Free CSS Templates
<ul>
<li>Free XHTML Templates</li>
<li>Free Website Templates</li>
</ul>
</li>
<li>Open Source Layouts
<ul>
<li>Open Source Software</li>
<li>Open Source Webdesign
<ul>
<li>Open Source Downloads</li>
<li>Open Source Website</li>
</ul>
</li>
</ul>
</li>
<li>Open Source Themes</li>
</ul>
</div>
<div class="holder">
<h2 class="title"><img src="images/demo/60x60.gif" alt="" />Nullamlacus dui ipsum conseque</h2>
<p>Nullamlacus dui ipsum conseque loborttis non euisque morbi penas dapibulum orna. Urnaultrices quis curabitur phasellentesque.</p>
<p class="readmore">Continue Reading »</p>
</div>
<div id="featured">
<ul>
<li>
<h2>Indonectetus facilis</h2>
<p class="imgholder"><img src="images/demo/240x90.gif" alt="" /></p>
<p>Nullamlacus dui ipsum conseque loborttis non euisque morbi penas dapibulum orna. Urnaultrices quis curabitur phasellentesque congue magnis vestibulum quismodo nulla et feugiat. Adipisciniapellentum leo ut consequam ris felit elit id nibh sociis malesuada.</p>
<p class="readmore">Continue Reading »</p>
</li>
</ul>
</div>
<div class="holder">
<h2>Lorem ipsum dolor</h2>
<p>Nuncsed sed conseque a at quismodo tris mauristibus sed habiturpiscinia sed.</p>
<ul>
<li>Lorem ipsum dolor sit</li>
<li>Etiam vel sapien et</li>
<li>Etiam vel sapien et</li>
</ul>
<p>Nuncsed sed conseque a at quismodo tris mauristibus sed habiturpiscinia sed. Condimentumsantincidunt dui mattis magna intesque purus orci augue lor nibh.</p>
<p class="readmore">Continue Reading »</p>
</div>
</div>
<!-- ####################################################################################################### -->
<div class="clear"></div>
</div>
</div>
<!-- ####################################################################################################### -->
<?php include_once($_SERVER["DOCUMENT_ROOT"].'/includes/footer.php'); ?>
</body>
</html>
In the main page, the form is defined as <form action="#" method="post">. For the action, you need to put the PHP file you're calling. # doesn't make sense. Look at your other declaration:
<form name="contactform" method="post" action="send_form_email.php">
This makes sense. It's telling HTML to send to send_form_email.php the information through POST.