Skip to content

Commit 6fc42b2

Browse files
erwindosianiparerwindosianipar
authored
Add files via upload
Upload script PHP Twibbon Generator
1 parent af2eb3a commit 6fc42b2

File tree

4 files changed

+168
-0
lines changed

4 files changed

+168
-0
lines changed

Diff for: ‎cicacode.png

20.1 KB
Loading

Diff for: ‎index.php

+168
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
7+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
8+
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
9+
10+
<title>Women for Indonesia Twibbon</title>
11+
<meta name="description" content="Women for Indonesia twibbon generator">
12+
<meta name="keyword" content="WFI, Women, for Indonesia, women for indonesia, twibbon, generator">
13+
<link rel="canonical" href="https://cicacode.com/twibbon/">
14+
</head>
15+
<body style="background: #f9f9f9">
16+
<nav class="navbar navbar-light bg-white shadow-sm">
17+
<div class="container">
18+
<a class="navbar-brand" href="https://cicacode.com/twibbon">
19+
<img src="wfi.jpg" width="30" height="30">
20+
<span class="navbar-brand mb-0 h1">Women for Indonesia</span>
21+
</a>
22+
</div>
23+
</nav>
24+
<div class="container my-5">
25+
<div class="row">
26+
<div class="col-lg-6 offset-lg-3 col-md-12 mb-4">
27+
<div class="card card-body shadow-sm mb-4">
28+
<?php
29+
if (isset($_POST['submit']))
30+
{
31+
$namafile = $_FILES["file"]["name"];
32+
$filegambar = substr($namafile, 0, strripos($namafile, '.'));
33+
$ekstensifile = substr($namafile, strripos($namafile, '.'));
34+
$ukuranfile = $_FILES["file"]["size"];
35+
$jenisfile = array('.jpg','.jpeg','.png','.bmp', '.JPG','.JPEG','.PNG','.BMP');
36+
37+
if (!empty($filegambar))
38+
{
39+
if ($ukuranfile <= 500000)
40+
{
41+
if (in_array($ekstensifile, $jenisfile) && ($ukuranfile <= 500000))
42+
{
43+
$namabaru = time().'_'.uniqid().'_'.date("Ymdhis").'_n'.$ekstensifile;
44+
if (file_exists("images/" . $namabaru))
45+
{
46+
echo '<script>';
47+
echo 'swal("Error!", "Terjadi kesalahan, silahkan coba lagi", "error");';
48+
echo '</script>';
49+
}
50+
else
51+
{
52+
move_uploaded_file($_FILES["file"]["tmp_name"], "images/" . $namabaru);
53+
$gambar = "images/" . $namabaru;
54+
55+
echo '<img src="'.$gambar.'" id="img1" width="500px" height="500px" hidden="true" class="img-fluid">';
56+
echo '<img src="twibbon.png" id="img2" width="500px" height="500px" hidden="true" class="img-fluid">';
57+
echo '<h2><canvas id="canvas" class="img-fluid"></canvas></h2>';
58+
echo '<a id="download" class="btn btn-primary mb-3 text-white">Download gambar</a>';
59+
}
60+
}
61+
else
62+
{
63+
echo '<script>';
64+
echo 'swal("Error!", "File yang diupload harus gambar", "error");';
65+
echo '</script>';
66+
unlink($_FILES["file"]["tmp_name"]);
67+
}
68+
}
69+
else
70+
{
71+
echo '<script>';
72+
echo 'swal("Error!", "Ukuran file tidak boleh lebih dari 5MB", "error");';
73+
echo '</script>';
74+
}
75+
}
76+
else
77+
{
78+
echo '<script>';
79+
echo 'swal("Error!", "Gambar tidak boleh kosong", "error");';
80+
echo '</script>';
81+
}
82+
}
83+
?>
84+
<div class="mb-4 font-weight-light">
85+
<h5 class="font-weight-light">Women for Indonesia</h5>
86+
<p>Diberdayakan untuk memberdayakan. Komunitas Women for Indonesia lahir sebagai bentuk kepedulian terhadap perempuan dan masyarakat.</p>
87+
</div>
88+
<form method="post" enctype="multipart/form-data">
89+
<label class="font-weight-light"><b>Upload foto</b></label>
90+
<input type="file" name="file" id="image" accept="image/*" class="p-1 img-thumbnail btn-block">
91+
<div class="mb-2 font-italic">
92+
<small>Tips: gunakan ukuran foto 1:1 untuk hasil terbaik</small>
93+
</div>
94+
<button type="submit" name="submit" class="btn btn-primary btn-sm">
95+
Buat Twibbon!
96+
</button>
97+
<a title="Cara penggunaan" class="btn btn-link btn-sm" data-toggle="modal" data-target="#modal">
98+
Cara penggunaan
99+
</a>
100+
</form>
101+
</div>
102+
<div class="card card-body shadow-sm">
103+
<div class="font-weight-light">
104+
IG:
105+
<a href="https://www.instagram.com/womenforindonesia" title="Women for Indonesia">
106+
@womenforindonesia
107+
</a>
108+
</div>
109+
</div>
110+
</div>
111+
</div>
112+
</div>
113+
<a href="https://erwindosianipar.github.io" title="Cicacode">
114+
<center>
115+
<img src="cicacode.png" alt="Cicacode Logo" class="img-fluid mb-5" width="150">
116+
</center>
117+
</a>
118+
119+
<div class="modal modal-fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modallabel" aria-hidden="true">
120+
<div class="modal-dialog" role="document">
121+
<div class="modal-content">
122+
<div class="modal-header">
123+
<b>Cara penggunaan</b>
124+
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
125+
<span aria-hidden="true">&times;</span>
126+
</button>
127+
</div>
128+
<div class="modal-body">
129+
<i>Upload foto yang ingin kamu jadikan twibbon, pilih file dan klik Buat Twibbon! Download gambar dan bagikan ke sosial media kamu sebagai bentuk kepedulian perempuan terhadap perempuan dan masyarakat.</i>
130+
</div>
131+
</div>
132+
</div>
133+
</div>
134+
135+
<script>
136+
window.onload = function () {
137+
var img1 = document.getElementById('img1');
138+
var img2 = document.getElementById('img2');
139+
var canvas = document.getElementById("canvas");
140+
var context = canvas.getContext("2d");
141+
var width = img2.width;
142+
var height = img2.height;
143+
canvas.width = width;
144+
canvas.height = height;
145+
146+
context.drawImage(img1, 0, 1, width, height);
147+
var image1 = context.getImageData(0, 0, width, height);
148+
var imageData1 = image1.data;
149+
context.drawImage(img2, 0, 0, width, height);
150+
var image2 = context.getImageData(0, 0, width, height);
151+
var imageData2 = image2.data;
152+
};
153+
154+
function downloadCanvas(link, canvasId, filename) {
155+
link.href = document.getElementById(canvasId).toDataURL();
156+
link.download = filename;
157+
}
158+
159+
document.getElementById('download').addEventListener('click', function() {
160+
downloadCanvas(this, 'canvas', 'wfi-twibbon.png');
161+
}, false);
162+
163+
</script>
164+
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
165+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
166+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
167+
</body>
168+
</html>

Diff for: ‎twibbon.png

2.59 MB
Loading

Diff for: ‎wfi.jpg

1.65 KB
Loading

0 commit comments

Comments
 (0)