The user arrives on the following php script and it sets if the email has been confirmed or not.
At the moment the only thing the user can seen in the browser is a very simple message printed by the php echo.
I would like it to look visually more interesting. Get this echo to be part of a properly styled HTML page with header, font styles, signature, images...
What would be the best approach for that having in mind my script has breakpoints? As I never did that before, not sure what would be the best start point to focus the effort on.
Bellow are my code updates based on the answers. Hope that helps other
users that are new to php.
<?php
require("../db/MySQLDAO.php");
require ("../Classes/EmailConfirmation.php");
$config = parse_ini_file('../db/SwiftApp.ini');
//host access data
$dbhost = trim($config["dbhost"]);
$dbuser = trim($config["dbuser"]);
$dbpassword = trim($config["dbpassword"]);
$dbname = trim($config["dbname"]);
// receive token data
$emailToken = htmlentities($_GET["token"]);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title here</title>
<style>
/* -------------------------------------
GLOBAL
------------------------------------- */
* {
margin: 0;
padding: 0;
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 100%;
line-height: 1.6;
}
img {
max-width: 100%;
}
body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
width: 100%!important;
height: 100%;
}
/* -------------------------------------
ELEMENTS
------------------------------------- */
a {
color: #348eda;
}
.btn-primary {
text-decoration: none;
color: #FFF;
background-color: #348eda;
border: solid #348eda;
border-width: 10px 20px;
line-height: 2;
font-weight: bold;
margin-right: 10px;
text-align: center;
cursor: pointer;
display: inline-block;
border-radius: 25px;
}
.btn-secondary {
text-decoration: none;
color: #FFF;
background-color: #aaa;
border: solid #aaa;
border-width: 10px 20px;
line-height: 2;
font-weight: bold;
margin-right: 10px;
text-align: center;
cursor: pointer;
display: inline-block;
border-radius: 25px;
}
.last {
margin-bottom: 0;
}
.first {
margin-top: 0;
}
.padding {
padding: 10px 0;
}
/* -------------------------------------
BODY
------------------------------------- */
table.body-wrap {
width: 100%;
padding: 20px;
}
table.body-wrap .container {
border: 1px solid #f0f0f0;
}
/* -------------------------------------
FOOTER
------------------------------------- */
table.footer-wrap {
width: 100%;
clear: both!important;
}
.footer-wrap .container p {
font-size: 12px;
color: #666;
}
table.footer-wrap a {
color: #999;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1, h2, h3 {
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color: #d63480;
margin: 40px 0 10px;
line-height: 1.2;
font-weight: 200;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 22px;
}
p, ul, ol {
margin-bottom: 10px;
font-weight: normal;
font-size: 14px;
}
ul li, ol li {
margin-left: 5px;
list-style-position: inside;
}
/* ---------------------------------------------------
RESPONSIVENESS
------------------------------------------------------ */
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
display: block!important;
max-width: 600px!important;
margin: 0 auto!important; /* makes it centered */
clear: both!important;
}
/* Set the padding on the td rather than the div for Outlook compatibility */
.body-wrap .container {
padding: 20px;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
max-width: 600px;
margin: 0 auto;
display: block;
}
/* Let's make sure tables in the content area are 100% wide */
.content table {
width: 100%;
}
</style>
</head>
<body bgcolor="#f6f6f6">
<!-- body -->
<table class="body-wrap" bgcolor="#f6f6f6">
<tr>
<td></td>
<td class="container" bgcolor="#FFFFFF">
<!-- content -->
<div class="content">
<table>
<tr>
<td>
<h1>Title</h1>
<table>
<tr>
<td class="padding">
<p>
<?php
if(empty($emailToken)) {
echo "<h2>Sorry, something went wrong...</h2>";
echo "<p>Unfortunately your email validation token has expired.</p>";
echo "<p>Please get in contact with us at <a href=mailto:></a></p>";
}
else{
//open server connection
$dao = new MySQLDAO($dbhost, $dbuser, $dbpassword, $dbname);
$dao->openConnection();
//creates user
$user_id = $dao->getUserIdWithToken($emailToken);
if(empty($user_id))
{
echo "<h2>Sorry, something went wrong...</h2>";
echo "<p>We could not find an user associated with the email you provided.</p>";
echo "<p>Please get in contact with us at <a href></a></p>";
}
else{
$result = $dao->setEmailConfirmedStatus(1, $user_id);
if($result)
{
echo "<h2>Thank you! Your email is now confirmed!<h2>";
$dao->deleteUsedToken($emailToken);
}
}
$dao->closeConnection();
}
?>
</p>
</td>
</tr>
</table>
<p class="padding"></p>
<p>Thanks,</p>
<p>Title team</p>
<p class="padding"></p>
</td>
</tr>
</table>
</div>
<!-- /content -->
</td>
</tr>
</table>
<!-- /body -->
</body>
</html>
Use HTML to structure your content and CSS to format your content.
You can echo HTML and CSS right along with your string.
Those links should get you going in the right direction.
Update to accommodate comment
There are many methods, but a simple example that might work for your case is something like this:
Instead of echoing right there in your if statement, replace it with an include or require.
Lets call that file template.php. This file does not need to start with <?php and end with ?>. PHP can punch in and out with HTML. So template.php might look like this:
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta charset="UTF-8">
<title></title>
<link href="css/styles.css" rel="stylesheet" />
</head>
<body>
<div class="some_style"><?php
echo 'something';
?></div>
<div class="some_style2"><?php
echo $some_var;
?></div>
</body>
</html>
Also if this is going to be sent in an email, CSS is not really supported in email, so you will need to keep the styling to what you can do with simple HTML tags and images.
Change your echo to:
echo '<div id="message">User with this email token is not found</div>';
Then style #message with css
Hope that helps!
urgh.. uglyness html in php. There are ways in which you can include html within the script without echoing it out.
There is the old way.
// out of php
?>
<div>
<?php echo $content; ?>
</div>
<?
// back in.
Or you can look into php/html short hand. Your code will benefit from it because it will be somewhat cleaner to read,
The main reason though, dont make php parse html unless you have to.
PHP
echo "<p id='token_message'>User with this email token is not found</p>";
CSS
#token_message {
/* Styling Here */
}
Related
I'm just starting with HTML and PHP and I ran into the following problem:
When having a PHP command the webpage shows wrong colors!
With PHP command (<?php phpinfo( ); ?>)
Without PHP command:
It's pretty clear to see that the navbar elements change color, depending on the command, but why?
I can't get this fixed, no matter what I do. Here's my other code:
PHP-Source-File:
<!DOCTYPE HTML>
<html>
<head>
<title>PHP-Info</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<link rel="stylesheet" href="./css/index.css" type="text/css" media="all">
</head>
<body>
<ul class="navbar">
<li class="navbar"><a class="navbar" href="index.php">Home</a></li>
<div style="float: right;">
<li class="navbar"><a class="navbar" href="">Server-Info</a></li>
<li class="navbar"><a class="navbar active" href="phpinfo.php">PHP-Info</a></li>
</div>
</ul>
<div>
<?php phpinfo( ); ?>
</div>
</body>
</html>
Stylesheet:
* {
margin: 0;
padding: 0;
font-family: Tahoma, sans-serif;
font-size: 100%;
}
body {
margin-top: 55px;
}
ul.navbar {
position: fixed;
top: 0;
width: 100%;
height: 5.4%;
list-style-type: none;
overflow: hidden;
background-color: rgba(33, 33, 33, 0.35);
}
li.navbar {
float: left;
}
li a.navbar {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover.navbar {
border-bottom: 4px solid dodgerblue;
}
li a.active.navbar {
background-color: #666666;
border-bottom: 4px solid #666666;
}
In your CSS stylesheet I see you have :hover and :active before your classes. Try switching them around, like this:
li a.navbar:hover {
border-bottom: 4px solid DodgerBlue;
}
li a.navbar:active {
background-color: #666666;
border-bottom: 4px solid #666666;
}
EDIT: Plus you had a period . instead of a colon : before active.
It is also a good idea to capitalize your color names. DodgerBlue instead of dodgerblue. Some browsers are strict about this.
I have a website that displays a list of user accounts on the left side going down in a list that are clickable (hyperlinks) that take you to the user's profile page. Also, I have a search field (form) in the middle of the page where users can just search for someone. However, because of that search field, the usernames displayed on the left side that are aligned with this field are broken, you cannot click on them anymore. The hyperlinks that are not aligned with the search field and are under the alignment of it work. After troubleshooting, I found out that this field in my CSS code was the cause of it: position: absolute;
Taking that field out of the CSS code breaks the position of my search field in the middle of the page and it gets placed at the bottom of the page.
I don't know how to fix this problem without breaking the positioning of my content on the page.
My code:
<?php
include('init.inc.php');
$output = '';
if(isset($_POST['search'])){
$searchq = $_POST['search'];
$searchq = preg_replace("#[^0-9a-z]#i","",$searchq); //filter, can remove
$query = mysql_query("SELECT * FROM users WHERE user_first LIKE '%$searchq%' OR user_last LIKE '%$searchq%' OR user_uid LIKE '%$searchq%'");
$count = mysql_num_rows($query);
if($count == 0){
$output = 'There was no search found!';
}else{
while($row = mysql_fetch_array($query)){
$uname = $row['user_uid'];
$fname = $row['user_first'];
$lname = $row['user_last'];
$email = $row['user_email'];
$id = $row['user_id'];
$output .= '<div> '.$uname.' '.$fname.' '.$lname.' '.$email.'</div>';
}
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=""http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<section id="showcase1">
<section id="newsletter">
<div class="container">
<h1>ProjectNet Members:</h1>
</div>
</section>
<div class="container">
<div class="userList">
<?php
foreach (fetch_users() as $user){
?>
<p>
<button><a class="userList" href="profile.php?uid=<?php echo $user['id']; ?>"><?php echo $user['username']; ?></a></button>
</p>
<?php
}
?>
</div>
</div>
<div class="searchList">
<h2>Search for members</h2>
<form id="search" action="user_list.php" method="post">
<input type="text" name="search" placeholder="Search for members..." />
<input type="submit" value="Search" />
</form>
<?php print("$output");?>
</div>
</section>
</body>
</html>
CSS:
THIS IS THE CSS FOR THE SEARCH FIELD IN THE MIDDLE OF THE PAGE
.searchList {
color: #ffffff;
text-decoration: none;
font-weight: bold;
font: 19px Arial, Helvetica,sans-serif;
text-align: center;
line-height: 35px;
margin: auto;
margin-top: -100px;
position: absolute;
top: 45%;
width: 100%;
}
#search input[type="submit"] {
cursor: pointer;
border: none;
background: #fafafa;
color: #333;
font-weight: bold;
margin: 0 0 5px;
padding: 3px;
font-size: 15px;
font: Arial, Helvetica,sans-serif;
}
#search input[type="text"] {
width: 18%;
border: 1px solid #CCC;
background: #FFF;
margin: 0 0 5px;
padding: 4px;
}
#search input[type="submit"]:hover {
background: #e8491d;
color: #fafafa;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
CSS:
THIS IS THE CSS FOR THE LIST OF USERS ON THE LEFT SIDE OF THE PAGE
.userList {
color: #ffffff;
text-decoration: none;
font-weight: bold;
font: 20px Arial, Helvetica,sans-serif;
margin: auto;
}
.userList button {
background: #333;
width: 20%;
}
There isn't a whole lot of info supplied and its hard to visualize without an image but my guess would be a z-index issue.
Below you can see that the div goes from left to right(width 100%). I assume that this div is sitting on top of your userList div based on the supplied css. This means you probably cant click the hyperlinks below the searchList div.
.searchList {
color: #ffffff;
text-decoration: none;
font-weight: bold;
font: 19px Arial, Helvetica,sans-serif;
text-align: center;
line-height: 35px;
margin: auto;
margin-top: -100px;
position: absolute;
top: 45%;
width: 100%;
}
Try setting a z-index to the userlist div that is higher than the searchList so that you are able to click on the hyperlinks.
.userList {
color: #ffffff;
text-decoration: none;
font-weight: bold;
font: 20px Arial, Helvetica,sans-serif;
margin: auto;
z-index: 1000;
}
Absolute positioning is centering the searchList div in center without effecting other divs in the body. When you remove it, then the searchList div moves to the bottom because that is its location in the body.
I have a web page which displays data on the left side of the page and it goes down in a list.
I need help displaying a form in the middle/right side of the page using CSS. With the current CSS I have for the form, it is displayed at the bottom of the page which is wrong, I want it to be in the middle/right. The form is basically a search field where users can search for members on the website.
I'm bad with CSS, maybe someone can also suggest a cool style for the form? :D
The div class called searchList is where the form is that I want to align to the middle/right
My code:
<?php
include('init.inc.php');
$output = '';
if(isset($_POST['search'])){
$searchq = $_POST['search'];
$searchq = preg_replace("#[^0-9a-z]#i","",$searchq); //filter, can remove
$query = mysql_query("SELECT * FROM users WHERE user_first LIKE '%$searchq%' OR user_last LIKE '%$searchq%' OR user_uid LIKE '%$searchq%'");
$count = mysql_num_rows($query);
if($count == 0){
$output = 'There was no search found!';
}else{
while($row = mysql_fetch_array($query)){
$uname = $row['user_uid'];
$fname = $row['user_first'];
$lname = $row['user_last'];
$email = $row['user_email'];
$id = $row['user_id'];
$output .= '<div> '.$uname.' '.$fname.' '.$lname.' '.$email.'</div>';
}
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=""http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<section id="showcase1">
<section id="newsletter">
<div class="container">
<h1>ProjectNet Members:</h1>
</div>
</section>
<div class="container">
<div class="userList">
<?php
foreach (fetch_users() as $user){
?>
<p>
<button><a class="userList" href="profile.php?uid=<?php echo $user['id']; ?>"><?php echo $user['username']; ?></a></button>
</p>
<?php
}
?>
</div>
</div>
<div class="searchList">
<form id="search" action="user_list.php" method="post">
<input type="text" name="search" placeholder="Search for members..." />
<input type="submit" value="Search" />
</form>
<?php print("$output");?>
</div>
</section>
</body>
</html>
CSS:
.searchList {
color: #ffffff;
text-decoration: none;
font-weight: bold;
font: 20px Arial, Helvetica,sans-serif;
text-align: center;
}
UPDATE:
I managed to get the form in the middle of the screen, I need help moving it slightly towards the right.
CSS:
.searchList {
color: #ffffff;
text-decoration: none;
font-weight: bold;
font: 19px Arial, Helvetica,sans-serif;
text-align: center;
left: 0;
line-height: 35px;
margin: auto;
margin-top: -100px;
position: absolute;
top: 50%;
width: 100%;
float: right;
}
#search input[type="submit"] {
cursor: pointer;
border: none;
background: #fafafa;
color: #333;
font-weight: bold;
margin: 0 0 5px;
padding: 3px;
font-size: 15px;
font: Arial, Helvetica,sans-serif;
}
#search input[type="text"] {
width: 18%;
border: 1px solid #CCC;
background: #FFF;
margin: 0 0 5px;
padding: 4px;
}
}
#search input[type="submit"]:hover {
background: #e8491d;
color: #fafafa;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
Use CSS position property or float property.
To display form on the right of the page use float : right;
form {
float : right;
}
Moving to the right, where the 4th value is the left padding.
padding: 0px 0px 0px 30px;
..alternatively you can use.
padding-left: 30px;
If you want to have better control of the layout structure I suggest you use "grid" which is embedded in css. Search for "css grid".
I'm having some problems with my login feature using php with multiple users, I'm not using a database as this is a school assignment.
So the assignment is as follows "create an associative array with usernames as keys and encrypted passwords using password_hash. Once the user has logged in it shall print out the users name." We got a template that we should use, I will paste all the necessary code. So the problem I am having is, that when I try to log in as a user it keeps redirecting me so that I get the "too many redirects" error.
login.php
<?php
session_start();
if(isset($_POST['password'],$_POST['username'])){
include("pwd.php");
include("user.php");
$key = $_POST['username'];
if(isset($user[$key])){
$_SESSION['inloggad'] = true; // Användaren har anget rätt uppgifter.
$_SESSION['user'] = $_POST['username'];
}
}
if(isset($_SESSION['inloggad'])){
header("Location: index.php");
}
else{
echo "<h1>Vänligen logga in!</h1>";
}
?>
login.html
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8" >
<title>Sessioner</title>
</head>
<body>
<form method="post" action="login.php">
Username: <input type="username" name="username" size="20" /><br />
<br>
Password: <input type="password" name="password" size="20" /><br />
<input type="submit" value="Logga in" name="login"/>
</form>
</body>
</html>
user.php
<?php
$user['admin'] = '$2y$10$9NyoNcqG9sh0KOrVnUXLr.KscgDy0L1S0klYXK67oxVBVsElbbGja';
$user['hank'] = '$2y$10$tQNcTINMIcotw0IczQ1nTuOVRIpbuqh5M/k.mLpz7ZiZl8q2WA0Cy';
$user['elias'] = '$2y$10$tQNcTINMIcotw0IczQ1nTuOVRIpbuqh5M/k.mLpz7ZiZl8q2WA0Cy';
?>
start.php
<h1>Välkommen</h1>
<?php
include("login.php");
if(isset($_POST['password'],$_POST['username'])){
echo '<h1>' . $_POST['username'] . '</h1>';
}
?>
index.php
<?php session_start(); ?>
<!doctype html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<title>Länka in med PHP</title>
<link href="css/styleSheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<?php include("header.php"); ?>
</header><!-- header -->
<section id="leftColumn">
<nav>
<?php
if(isset($_SESSION['inloggad'])){
include("meny.php");
}else{
include("login.html");
}
?>
</nav>
<aside>
<?php include("aside.php"); ?>
</aside>
</section><!-- End leftColumn -->
<main>
<section>
<!-- Lägg in innehållet här -->
<?php
$page = "start";
if(isset($_GET['page']))
$page = $_GET['page'];
switch($page){
case 'blogg': include('blogg.php');
break;
case 'bilder': include('bilder.php');
break;
case 'kontakt': include('kontakt.php');
break;
case 'klotter': include('klotter.php');
break;
default: include('start.php');
}
?>
</section>
</main><!-- End main -->
<footer>
<?php include('footer.php'); ?>
</footer><!-- End footer -->
</div><!-- End wrapper -->
</body>
</html>
styleSheet.css
#CHARSET "UTF-8";
* {
margin:0;
padding:0;
font-family:Verdana, Geneva, sans-serif;
}
body{
font-size: 100%;
}
p {
font-size: 0.8em;
margin-bottom: 10px;
margin-top: 5px;
margin-right: 10px;
text-align: justify;
}
/* Wrapper */
#wrapper {
width: 800px;
margin-left: auto;
margin-right:auto;
margin-top:10px;
border: 2px solid rgba(0,0,0,0.8);
}
/* End wrapper */
/* Header */
header {
text-align:center;
height: 60px;
background-image: url("../bilder/bgImg.png");
color: white;
}
header h1{
font-family: Arial;
font-size: 1.9em;
padding-top: 0.25em;
}
header time{
float: right;
margin-right: 2em;
font-size: 0.8em;
}
/* End header */
nav{
border-radius: 5px; /* CSS3 */
border: 1px solid #999;
padding: 4px;
margin-bottom:5px;
}
nav ul {
list-style:none;
}
nav li{
margin-top: 5px;
border: 1px solid #000;
}
nav li a{
display:block;
font-size: 0.8em;
text-decoration: none;
color: #aa0000;
padding-left: 15px;
background-color:#FFC;
}
nav li a:hover, #leftColumn li a:active, #leftColumn li a:focus{
background-color: gray;
color: #ffffff;
}
aside {
-moz-border-radius: 5px; /* Ger rundade hörn i Firefox */
border-radius: 5px; /* CSS3 */
border: 1px solid #999;
padding: 4px;
margin-bottom:5px;
}
aside p {
font-size: 0.8em;
}
/* leftColumn */
#leftColumn {
float: left;
width: 180px;
margin: 8px;
}
#leftColumn h1 {
font-family:Arial, Helvetica, sans-serif;
font-size: 0.9em;
}
/* End leftColumn */
/* Main */
main {
margin-top: 8px;
margin-left:200px;
}
main h1{
font-family: Arial, Helvetica, sans-serif;
font-size: 1.4em;
}
main h2{
font-family: Arial, Helvetica, sans-serif;
font-size: 1.1em;
}
main section{
float:right;
width: 99%;
}
form label,a{
font-size: 0.8em;
}
/* End content */
/* Footer */
footer {
height: 30px;
background-image: url("../bilder/bgImg.png");
color: white;
font-size: 0.75em;
clear:both;
}
footer #footerRight{
float:right;
padding: 5px;
}
footer #footerLeft{
float:left;
padding: 5px;
}
/* End footer */
the rest of the template is not really necessary for me to paste as it's just html code for the website, I just linked the css code if you want to check what the page looks like yourself. If you need any more information that I might have forgotten to write please notify me.
I know there's a problem with me using include("login.php") in the start.php, I just don't know how to solve it as I need the information submitted in the login form. The page controller is stating that start.php is the default page the template uses in the section.
EDIT: sorry I was not clear about this part. it only happens once I enter the correct details, for example, admin:12345.
EDIT 2:
new start.php code
<?php
include("login.php");
if(isset($_SESSION['user'])){
echo '<h1>Välkommen</h1>' . '<h1>' . $_SESSION['user'] . '</h1>';
}
?>
Full login.php I'm using:
<?php
session_start();
if (isset($_POST['password'], $_POST['username'])) {
include("pwd.php");
include("user.php");
$key = $_POST['username'];
if (isset($user[$key])) {
$_SESSION['inloggad'] = true; // Användaren har anget rätt uppgifter.
$_SESSION['user'] = $_POST['username'];
}
if (isset($_SESSION['inloggad']) && ($_SESSION['inloggad'] === TRUE)) {
header("Location: index.php");
} else {
echo "<h1>Vänligen logga in!</h1>";
}
}
In the index.php file there is a line default: include('start.php'); that can cause this page to redirect to itself because file start.php includes file login.php which has header("Location: index.php"). The same problem would apply in case any other included file on this page lead to inclusion of header("Location: index.php")
I want to upload video to server and then display it on web page using some player (like youtube) using PHP.
My client ask: "Videos must be no longer than 2 minutes and in either Quicktime, WMV, Mp4 or FLV format."
Is there any opensource script which help me to upload a video with client requirements and then an opensource player which plays that video?
Please help!
Thanks
This is my favourite solution:
http://flowplayer.org/
It enables to control the video quite a lot: it uses javascript settings and embedded flash video player.
Edit: if you look for good uploader, try
http://code.google.com/p/swfupload/
It can do multiple uploads, and filetype checks.
You must, first of all, create links to the videos you want to play (I created mine on a separate page[index.html]). Then upon the click of a link, it will open the page (play.php). I assumed that index.html was displaying the links to the videos from the database, then the rest of the scripting for playing is handled by play.php.
see codes below:
index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
tr:nth-child(odd) {
background-color: #f2f2f2
}
</style>
</head>
<body>
<center>
<table width="53%" border="1">
<tr>
<td width="8%">S/NO</td>
<td width="92%">NAME OF VIDEO FILE</td>
</tr>
<tr>
<td align="center">1</td>
<td>Funny Nigeria Video Animation</td>
</tr>
<tr>
<td align="center">2</td>
<td><a href="play.php?url=WildGeese.mp4&pic=wg.png">Joan Armatrading-
Flight of the Wild Geese - MP4</a></td>
</tr>
</table>
</center>
</body>
</html>
play.php
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Fluid Width Video</title>
<style>
* { margin: 0; padding: 0; }
body {
font: 16px/1.4 Georgia, Serif;
width: 50%;
margin: 80px auto;
background: url(images/bglines.png);
}
h1 { font-weight: normal; font-size: 42px; }
h1, p, pre, video, h2, figure, h3, ol { margin: 0 0 15px 0; }
h2 { margin-top: 80px; }
h1 { margin-bottom: 40px; }
li { margin: 0 0 5px 20px; }
article { background: white; padding: 10%; }
pre { display: block; padding: 10px; background: #eee; overflow-x: auto; font: 12px Monaco, MonoSpace; }
img { max-width: 100%; }
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.videoWrapper iframe,
.videoWrapper object,
.videoWrapper embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
video {
width: 100% !important;
height: auto !important;
}
figure { display: block; background: #eee; padding: 10px; }
figcaption { display: block; text-align: center; margin: 10px 0; font-style: italic; font-size: 14px; orphans: 2; }
</style>
</head>
<body>
<?
if(isset($_GET['url'])){
$vid = "movies/".$_GET['url'];
$pos = "movies/".$_GET['pic'];
if($pos == "movies/ng.png"){
$cap = "Animation - Funny Play Station 3 Nigerin video clip";
}
if($pos == "movies/wg.png"){
$cap = "Jordan Armsterdam - The flight of the Wild Geese";
}
?>
<figure>
<video src="<?php echo $vid;?>" controls poster="<?php echo $pos;?>"></video>
<figcaption><?php echo $cap; ?></figcaption>
</figure>
<?php }else{ echo "You must be a paid Student in order to watch video tutorial!"; }?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
var $allVideos = $(".js-resize"),
$fluidEl = $("figure");
$allVideos.each(function() {
$(this)
// jQuery .data does not work on object/embed elements
.attr('data-aspectRatio', this.height / this.width)
.removeAttr('height')
.removeAttr('width');
});
$(window).resize(function() {
var newWidth = $fluidEl.width();
$allVideos.each(function() {
var $el = $(this);
$el
.width(newWidth)
.height(newWidth * $el.attr('data-aspectRatio'));
});
}).resize();
</script>
</body>
</html>