I would like to produce an application form, written in PHP and CSS, and my problem is this: In the tag, I set up a submit button, and upon writing my name into the text bar, I get the sentence "The name that I have entered is: " at the TOP LEFT of my web page. I don't want this this sentence at the top of my page. I want this sentence BELOW the text box into which I enter my name. Having the sentence appear at the top of my web page means a badly designed web pae, but I don't know how to make this sentence appear where I want it to appear. OK, when I get rid of all the other codes (ie CSS codes etc) in my program and just have the tag all by itself (together with the sentence "The name that I have entered is: "), I enter the name Gavin, and what I get is "The name that I have entered is: Gavin", and this sentence appears ABOVE the textbox. It seems that the position is default, and there is nothing that can be done. Am I right? Is there ANY way to reposition my sentence so it appears BELOW the text box. Also, is there any way to make my textbox disappear once I have entered my name and clicked on SUBMIT?
<?php
//brownuniversity.php
if (!empty($_POST['name'])) {
echo "Hello, {$_POST["name"]}, and welcome.";
}
?>
<html>
<head>
<title>Image</title>
<style>
p.pos_fixed {
position: fixed;
top: 30px;
right: 50px;
color: black;
}
h4 {
text-decoration: underline;
}
</style>
</head>
<body>
<h4>Application Form</h4>
<img src="alphacentauri.jpg" alt="starcluster" width="200" height="200" /><br/><br/>
<p class="pos_fixed">
<b>Brown University:</b>
<br><br><br>
<b>Department of Physics:</b>
</p>
<ul>
<li>question1</li>
<li>question2</li>
</ul>
The name that I have entered is:
<form action="brownuniversity.php" method="post">
If you want to take part in this star-gazing project, enter your name:
<input type="text" name="name">
<input type="submit">
</form>
at the TOP LEFT of my web page
Because that's where you're putting it. Take a look:
...
if(!empty($_POST['name'])) {
echo "Hello, {$_POST["name"]}, and welcome.";
}
echo <<<_END
<html>
...
You're outputting the sentence before the HTML even begins. So of course it's going to be... before the HTML.
If you want it in a specific location of the page, output it at that location. For example:
...
<?php
if(!empty($_POST['name'])) {
?>
The name that I have entered is: <?php echo $_POST["name"]; ?>
<?php
}
?>
<form action="brownuniversity.php" method="post">
...
For a starter, tidy up the code.
This hopefully works.
<?php
//brownuniversity.php
if (!empty($_POST['name'])) {
echo "Hello, {$_POST["name"]}, and welcome.";
}
?>
<html>
<head>
<title>Image</title>
<style>
p.pos_fixed {
position: fixed;
top: 30px;
right: 50px;
color: black;
}
h4 {
text-decoration: underline;
}
</style>
</head>
<body>
<h4>Application Form</h4>
<img src="alphacentauri.jpg" alt="starcluster" width="200" height="200" /><br/><br/>
<p class="pos_fixed">
<b>Brown University:</b>
<br><br><br>
<b>Department of Physics:</b>
</p>
<ul>
<li>question1</li>
<li>question2</li>
</ul>
The name that I have entered is:
<?php
//brownuniversity.php
if (isset($_POST['name'])) {
$_POST["name"];
}
?>
<form action="brownuniversity.php" method="post">
If you want to take part in this star-gazing project, enter your name:
<input type="text" name="name">
<input type="submit">
</form>
Related
It should print the error message, but instead it prints:
"data['clan_id'] != 0){echo "You already have a clan.";} ?>"
here is an image of the error: https://i.imgur.com/BtV7i9s.png
my code:
<html>
<style>
.createclanbutton {
background-color: green;
color: black;
padding: 3px;
border-radius: 9px;
}
</style>
<body>
<?php
if ($user->data['clan_id'] != 0)
{
echo "You already have a clan.";
}
?>
<br><br>
<form action="">
<h3>Create your own clan.<br><br>
Clan Name: <input type="text" name="ClanName" value="Clan Name"><br><br>
Description:<br> <textarea rows="6" cols="50">Brief description of your clan!
</textarea><br>
<button class="createclanbutton">Create your own clan!</button>
</form>
</body>
</html>
I am using phpbb and created a column called "clan_id" in my database which I set at "2" to try and echo the error message.
Looks like you have saved the file as .html or anything? :) You need to save this file as .php!
I'm currently developing a simple web page that enables the user to: upload an image and a corresponding caption to a DB, let the user view the images and delete them.
I have already accomplished the first two with the following code:
<?php
#include_once("connection.php");
$db = new mysqli("192.168.2.2", "root", "", "proyectoti");
if ($db->connect_errno) {
echo "Failed to connect to MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;
}
echo "Información de servidor: ";
echo $db->host_info . "\n";
// Initialize message variable
$msg = "";
// If upload button is clicked ...
if (isset($_POST['upload'])) {
// Get image name
$image = addslashes(file_get_contents($_FILES['image']['tmp_name'])); #$_FILES['image']['name'];
// Get text
$image_text = mysqli_real_escape_string($db, $_POST['image_text']);
$sql = "INSERT INTO images (image, image_text) VALUES ('{$image}', '{$image_text}')";
// execute query
mysqli_query($db, $sql);
}
$result = mysqli_query($db, "SELECT * FROM images");
?>
<!DOCTYPE html>
<html>
<head>
<title>Proyecto TI | Sube imágenes</title>
<style type="text/css">
#content{
width: 50%;
margin: 20px auto;
border: 1px solid #cbcbcb;
}
form{
width: 50%;
margin: 20px auto;
}
form div{
margin-top: 5px;
}
#img_div{
width: 80%;
padding: 5px;
margin: 15px auto;
border: 1px solid #cbcbcb;
}
#img_div:after{
content: "";
display: block;
clear: both;
}
img{
float: left;
margin: 5px;
width: 300px;
height: 140px;
}
</style>
</head>
<body>
<h1>Proyecto TI | <a> Interfaz </a></h1>
<div id="content">
<?php
while ($row = mysqli_fetch_array($result)) {
echo "<div id='img_div'>";
#echo "<img src='images/".$row['image']."' >";
echo '<img src="data:image/jpeg;base64,'.base64_encode( $row['image'] ).'"/>';
echo "<p>".$row['image_text']."</p>";
echo "</div>";
}
?>
<form method="POST" action="index.php" enctype="multipart/form-data">
<input type="hidden" name="size" value="1000000">
<div>
<input type="file" name="image">
</div>
<div>
<textarea
id="text"
cols="40"
rows="4"
name="image_text"
placeholder="Di algo de esta imagen ^^"></textarea>
</div>
<div>
<button type="submit" name="upload">Publicar</button>
</div>
</form>
</div>
</body>
</html>
It looks like this:
Now, the only part I'm missing is being able to delete an image (basically I only echo each image), how would you suggest for me to accomplish this, to make each item clickable and let's say, pop up a dialog or button to perform an action (delete from DB).
I really don't know much about PHP or CSS/HTML, any help would be much appreciated, Thank you!
Within this loop:
<?php
while ($row = mysqli_fetch_array($result)) {
echo "<div id='img_div'>";
#echo "<img src='images/".$row['image']."' >";
echo '<img src="data:image/jpeg;base64,'.base64_encode( $row['image'] ).'"/>';
echo "<p>".$row['image_text']."</p>";
echo "</div>";
}
?>
Personally I would add an element to click on - like an 'x' or whatever - with a unique data attribute:
https://www.abeautifulsite.net/working-with-html5-data-attributes
You have to add the unique id of the image obviously, so you can let SQL know which row to delete... Like this:
echo "<div class='delete-image' data-id='" . $row['id'] . "'>x</div>';
Then I would link this class to an AJAX call to make an asynchronous request to the server and delete the image without reloading the page. It's not very hard.
An easier solution would be to create a new form in the loop, so you create multiple forms per image, add a hidden field with the image id in the form and make a submit button with the valeu 'delete' or simply 'x'.
The same way you created the check:
if (isset($_POST['upload'])) { ... }
You can create something like this:
if (isset($_POST['delete-image'])) { ... }
You will be carrying the image id value like a normal form input. And you can do whatever you want with it.
I would HIGHLY suggest you to look into how to work with jquery and ajax calls though.
Opening a dialogue and ask the user before he deletes an item will require that you either go another page for deletion or use javascript for this.
In both cases, you should somehow set an identifier for your image in your html-code.
I would suggest you give every image an id
'<img ... id="'.$yourImageId.'">'
or a data-attribute
'<img ... data-identifier="'.$yourImageId.'" >'
with that identifier.
First variant:
...
echo '<a href="/path/to/delete/view/page.php?image=yourImageId">'
echo '<img ... id="'.$yourImageId.'"/>'
echo '</a>'
...
and on this delete-view-page, you just have a form that triggers your delete-code
<form action="/path/to/delete/view/page.php" method="POST">
<input type="hidden" name="id" value="<?php echo $yourImageId ?>">
</form>
<!-- after this, react with $_POST['id'] --> to the id sent to the server side and delete the image in your database -->
The other way is not server side rendered.
You should give your Elements some class like "my-clickable-image".After that, you have a script on your page, that looks something like the following
<script>
/* get your images with querySelectorAll, the . stands for class and after that your name */
var clickables = document.querySelectorAll(".my-clickable-image");
clickables.foreach(function(image){
// say that for each image, when clicked the generated function is called image.addEventListener('click',generateShowDialogueFunc(image.getAttr("id")));
});
// generate a function(!) that reacts to an image being clicked
function generateShowDialogueFunc(imageIdentifier){
// return a function that adds a Pop Up to the page
// the Pop Up has approximately the code of the first options second page
// except that now, it must create and remove elements in javascript
return function createPopUp(){
removePopUp();
var popup = document.createElement("div");
popup.setAttribute("id","deletePopUp");
var deleteForm = document.createElement("form");
deleteForm.setAttr("action","/path/to/file/that/deletes/given/query.php?id="+imageIdentifier);
var deleteContents = '<p> Do you want to delete this image? </p>'
+ '<button type="submit"> yes </button>'
+ '<button onclick="removePopUp()"> no </button>'
deleteForm.innerHTML = deleteContents;
document.body.appendChild()
}
}
// remove the Pop Up that can be used to delete an image from the page
function removePopUp(){
var existingPopUp = document.getElementById("deletePopUp");
if(existingPopUp) document.body.removeChild(existingPopUp);
}
</script>
<!-- just add some styling to make the popup show on top of the page -->
<style>
#deletePopUp{
width: 50vw;
height: 50vh;
position: absolute;
z-index: 1;
padding: 1em;
}
</style>
In this case, you just call the server to delete the image, not to show the delete form.
I would suggest the second one but stack overflow is not made for opinion based answers.
Regarding simple security:
It looks like your users could give titles or texts to images.
try what happens if a user gives a title like <bold>some title</title>
and guess what would happen if the title is <script>window.location.href="google.com"</script>
(XSS * hint hint *)
Regarding code structure:
If you want to do something like web development more often, think about separating your database accessing code, and your logic code from your php page template code, this is called 3 tier architecture and standard for bigger projects but i guess this is really just a first, short prototype or test.
I am echoing records from the database which are wrapped with html tags and was trying to put some effect on the echoed data. When I click the edit link, the textfield should shake. It works on the first element but when I click the edit link of the next element, the first textfield still shakes and not the other one.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Wallpost</title>
<style>
.wallpost input[type="text"]{
width: 500px;
height: 20px;
}
.wallpost input[type="submit"]{
height: 26px;
}
.user{
font-weight: bold;
font-size: 20px;
}
.post{
font-family: Arial;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<?php
require_once 'dbconfig.php';
$user = $_SESSION['user'];;
echo '<form action="post.php" method="post" class="wallpost"><input
type="text" name="post" size="50"><input type="submit" name="wallpost"
value="Post"></form>';
$query = $con->query("SELECT * FROM statuspost ORDER BY id DESC");
while($i = $query->fetch_object()){
//echo $i->post.' '.$i->id.' <a href="wallpost.php?type=post&
id='.$i->id.'" >Remove</a>'.'<br/>';
echo '<span class="user">'.$i->user.'</span>'.'<br>'.'<span
class="post">'.$i->post.'</span>'.' <form action="editpost.php?type=post&
id='.$i->id.'" method="post"><span id="edit"><input type="text"
name="edit">
<br/><input type="submit" value="Edit"></span><a href="#"
onclick="showEdit();">Edit </a><a href="remove.php?type=post&
id='.$i->id.'" >Remove</a></form> '.'<br/><br/>';
//echo '<div id="post">'.$i->post.' '.$i->id.'<a href="#"
id="anchor" class="',$i->id,'" onclick="del();">Remove</a></div>
<br/>';
}
?>
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.2.0
/prototype.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0
/scriptaculous.js"></script>
<script>
function showEdit(){
Effect.Shake('edit');
}
</script>
</body>
</html>
Replace <span id="edit"> by something like <span id="edit'.$i->id.'"> to have different ids on each elements. Then of course, showEdit() must know which id it has to shake, so it has to take a parameter. Or even simpler: replace onclick="showEdit();" by onclick="Effect.Shake(\'edit'.$i->id.'\');"
Scriptaculous effects take either an ID or a JavaScript reference to a DOM element as their first argument, so if you add a classname to your multiple elements, you can shake all of them at once like this:
<span class="shake-me">...</span>
<span class="shake-me">...</span>
<span class="shake-me">...</span>
Inside an enumerator:
$$('.shake-me').each(function(elm){
Effect.Shake(elm);
});
I've below PHP code which shows QR code & I'm showing it in center on submitting password. Now, since I'm keeping it in center, the rest of the page appears white & I want entire browser background color to be in blue. I tried putting bgcolor but that only changes the middle section's background where image appears & I need entire browser's background color to be blue
Here is my code for reference:
<!DOCTYPE HTML>
<html>
<head>
<style>
.error {color: #FF0000;}
html, body {
height: 100%;
}
html {
display: table;
margin: auto;
}
body {
vertical-align: middle;
}
</style>
</head>
<body>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// reading from post
}
?>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<table width="380px">
<tr>
<td valign="top">Password:</td>
<td><input type="text" name="password" value="<?php echo $password; ?>"><span class="error">* <?php echo $passwordErr;?></span></td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<input type="submit" name="submit" value="Submit">
</td>
</tr>
</table>
</form>
<?php
if ($password) {
echo "<img src='./myqrcode.php?password=$password' />";
?>
</body>
</html>
Can any one tell me how to put blue color as background?
Thanks
Do you want the background in the body? Can you show us a screenshot?
You can try
body {
vertical-align: middle;
background-color: blue;
}
By the way, it's a bad idea to use tables for designing the layout of the page. Use divs instead. Like here:
http://www.w3schools.com/html/html_layout.asp
And also don't use old-fashioned html tags like "bgcolor", use only CSS for styling.
<body style="backgroundoclor:blue;">
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// reading from post
}
?>
I've been trying to do something very complicated (in my opinion, because it doesn't quite work the way I want it to). What I want, is that I have a text field where I type in something, then next to that is a button, and when you type in something in the text field, then press the button a new html element will appear (a box with in there the text you typed in the text field). Now, I've been trying this many different ways. Here's the code I'm using now:
<html>
<head>
<style>
div.cat {
width: 200px;
height: 25px;
border: 1px solid black;
}
</style>
</head>
<?php
$form = "<form method=\"post\" action=\"<?php echo $_SERVER['PHP_SELF']; ?>\"><input type=\"text\" name=\"name\"><br><input type=\"submit\" value=\"Submit\"></form>";
function newCategory() {
$categoryname = $_POST['name'];
$category = "<div class=\"cat\"> <?php $categoryname ?> </div>"
echo $category;
}
?>
<body>
<?php
echo $form;
newCategory();
?>
</body>
</html>
Now, the issue seems to be that if you press the button, the newCategory() function won't execute again. Please help!
EDIT: The issue was in the syntax errors. It's still not working the way I want it to work, though I now know what went wrong. I guess I have to use JavaScript.
try this code...
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<input type="text" id="text1"/>
<input type="button" id="btn" value="Button"/>
<div id="div1">
</div>
<script>
$('#btn').click(function(){
var gettext=document.getElementById("text1").value;
var temp=document.createElement("input");
temp.id="text2";
temp.value=gettext;
$("#div1").html(temp);
});
</script>
You have syntax error,
Replace this to your whole code with this, it is working well
<html>
<head>
<style>
div.cat {
width: 200px;
height: 25px;
border: 1px solid black;
}
</style>
</head>
<?php
$form = "<form method='post' action='".$_SERVER['PHP_SELF']."'><input type='text' name='name'><br><input type='submit' value='Submit'></form>";
function newCategory() {
$categoryname = $_POST['name'];
$category = "<div class='cat'>".$categoryname."</div>";
return $category;
}
?>
<body>
<?php
echo $form;
echo newCategory();
?>
</body>
</html>
The problem is in this line of code: $category = "<div class=\"cat\"> <?php $categoryname ?> </div>".
You cannot have php tags <?php ?> inside another set of php tags.
Just change it to this: $category = "<div class=\"cat\">".$categoryname."</div>";.
And make sure you fix all the other syntax errors as well.