Kata pengantar
Saya sedang mengembangkan proyek pendidikan. Dan tahun ini anak-anak perlu menulis dalam bahasa Inggris.
Terlepas dari kenyataan bahwa kami semakin banyak mencetak teks dalam format elektronik, tulisan tangan masih populer dalam kehidupan sehari-hari dan profesional.
Resep adalah hal yang berguna baik untuk anak-anak maupun orang dewasa. Ada yang masih belajar menulis, ada yang berlatih.
Penting bagi kami untuk membuat sistem pemilihan resep yang cepat dan nyaman. Oleh karena itu, kami memutuskan untuk membuat generator sendiri.
Topiknya menarik, tetapi hanya ada sedikit informasi di Internet. Jadi muncul ide untuk menulis instruksi untuk membuat resep Anda sendiri.
tujuan
Alasan kenapa
- Harga: satu set harganya sekitar 300 rubel
- Kemampuan untuk mengeluarkan lebih banyak tugas pribadi tergantung pada apa yang perlu diselesaikan
- tidak ada informasi khusus tentang topik ini di Internet, menjadi menarik untuk mengetahui cara kerjanya.
- Jika Anda memiliki teknologi sendiri, Anda dapat memperbaikinya (Tambahkan kemampuan untuk mengubah ukuran teks, misalnya, atau generator tugas khusus yang terkait dengan resep)
Proses penciptaan
Karena kekhasan proyek saya, implementasi saya dilakukan di PCP, saya yakin ada banyak pilihan menarik dan bagus lainnya untuk menyelesaikan masalah ini.
Rumusan masalah
Anda harus selalu memulai dengan yang sederhana, dengan pernyataan masalah. Apa itu generator resep? Berikut diagram sederhana.
Kami memasukkan teks, file pdf dibuat dari teks dengan desain lembar buku catatan dan font tulisan tangan, yang harus diberi garis besar.
- Masukan teks
- Membuat file pdf
- ( , )
Jika html biasa akan membantu kita memasukkan teks dan mengirim formulir, maka untuk menghasilkan dokumen pdf kita membutuhkan perpustakaan khusus, mata saya tertuju pada fpdf (ini kecil, gratis dan sederhana - ideal untuk memecahkan masalah kita).
Ada pengiriman data, ada generator pdf, sekarang Anda membutuhkan font.
Ada Kurva Pembelajaran font bagus yang dengan sempurna memecahkan masalah kita. Font perlu diproses di situs fpdf sehingga Anda dapat menambahkannya ke skrip (encoding cp1252 baik-baik saja).
Sekarang tinggal mendapatkan desain lembar buku catatan: Saya mengambil fungsi untuk menggambar sel dari situs fpdf , menghapus garis vertikal di sana, menambahkan garis miring dan margin.
Akhirnya, setelah mengumpulkan semua elemen yang diperlukan, Anda dapat membuat generator resep.
Menyatukan semuanya
Kami mendesain halaman html dengan pengiriman formulir (saya mengambil desainnya di sini ):
- Mari buat bidang pemilihan font (abu-abu dan bertitik)
- Mari membuat kolom input teks
- Tombol kirim data
create-exercise.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<form class="decor" action="gotopdf2.php" method="post">
<div class="form-left-decoration"></div>
<div class="form-right-decoration"></div>
<div class="circle"></div>
<div class="form-inner">
<h3> </h3>
<p> <input type="radio" name="type_letter_propisi" value=0 checked></p>
<p> <input type="radio" name="type_letter_propisi" value=1></p>
<h3> :</h3>
<textarea name="data1"rows="10"></textarea>
<input type="submit" value=" ">
</div>
</form>
</body>
</html>
style.css
* {box-sizing: border-box;}
body {background: #f69a73;}
.decor {
position: relative;
max-width: 400px;
margin: 50px auto 0;
background: white;
border-radius: 30px;
}
.form-left-decoration,
.form-right-decoration {
content: "";
position: absolute;
width: 50px;
height: 20px;
background: #f69a73;
border-radius: 20px;
}
.form-left-decoration {
bottom: 60px;
left: -30px;
}
.form-right-decoration {
top: 60px;
right: -30px;
}
.form-left-decoration:before,
.form-left-decoration:after,
.form-right-decoration:before,
.form-right-decoration:after {
content: "";
position: absolute;
width: 50px;
height: 20px;
border-radius: 30px;
background: white;
}
.form-left-decoration:before {top: -20px;}
.form-left-decoration:after {
top: 20px;
left: 10px;
}
.form-right-decoration:before {
top: -20px;
right: 0;
}
.form-right-decoration:after {
top: 20px;
right: 10px;
}
.circle {
position: absolute;
bottom: 80px;
left: -55px;
width: 20px;
height: 20px;
border-radius: 50%;
background: white;
}
.form-inner {padding: 50px;}
.form-inner input{
display: inline;
width: normal;
padding: 0 20px;
margin-bottom: 10px;
background: #E9EFF6;
line-height: 40px;
border-width: 0;
border-radius: 20px;
font-family: 'Roboto', sans-serif;
}
.form-inner textarea {
display: block;
width: 100%;
padding: 0 20px;
margin-bottom: 10px;
background: #E9EFF6;
line-height: 40px;
border-width: 0;
border-radius: 20px;
font-family: 'Roboto', sans-serif;
}
.form-inner input[type="submit"] {
margin-top: 30px;
background: #f69a73;
border-bottom: 4px solid #d87d56;
color: white;
font-size: 14px;
}
.form-inner textarea {resize: none;}
.form-inner h3 {
margin-top: 0;
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 24px;
color: #707981;
}
Mengedit file dengan kelas kisi (membuat lembar buku catatan):
- Nonaktifkan garis vertikal
- Tambahkan margin samping (garis merah, meskipun masih akan berwarna abu-abu setelah dicetak)
- Kami mengatur warna penggaris menjadi hitam, karena notebook biru muda pada printer hitam dan putih tidak akan terlihat, tetapi pada tinta warna sangat disayangkan
- Kami menulis garis miring melalui garis singgung segitiga. Secara empiris diukur bahwa sudutnya harus 25 derajat
grid.php (file yang dimodifikasi dimana dulu ada kode untuk membuat grid)
<?php
require_once('fpdf182/fpdf.php');
class PDF_Grid extends FPDF {
var $grid = false;
var $inclined = false;
var $border = true;
var $i_hl= 0;
var $i_hl_up= 13.5;
function DrawGrid()
{
if($this->grid===true){
$spacing = 5;
} else {
$spacing = $this->grid;
}
$this->SetDrawColor(0,0,0);
$this->SetLineWidth(0.35);
$h_limit=$this->h-20;
for($i=$this->i_hl;$i<$h_limit;$i+=$spacing){ //print _ horizontal lines
$this->Line(0,$i,$this->w,$i);
}
for($i=$this->i_hl_up;$i<$h_limit;$i+=$spacing){ //print up_ horizontal lines 13.5
$this->Line(0,$i,$this->w,$i);
}
//Create inclined lines
$tan_treangle_inc_line=tan(deg2rad(25));
if($this->inclined == true){ //print / inclined lines
$this->SetDrawColor(0,0,0);
for($i=4;$i<=55;$i+=7)
$this->Line(12*$i*$tan_treangle_inc_line, 0, 0, 12*$i);
}
if($this->border == true){ //print | right border line
$this->SetDrawColor(255,0,0); //red border
$this->Line(185, 0, 185, 300);
}
}
function Header()
{
if($this->grid)
$this->DrawGrid();
}
}
?>
Sekarang kami membuat file itu sendiri untuk memproses data dan menghasilkan kata-kata:
- Menambahkan pilihan font melalui switch ()
- sesuaikan ukuran teks (di sini Anda dapat memilih nilai tertentu, karena ukuran lembar A4 selalu sama, ini bukan layar), untuk anak-anak lebih baik mengambil yang lebih besar, karena mereka masih belajar dan akan sulit bagi mereka untuk menulis dalam huruf kecil
gotopdf2.php (File Handler dimana semuanya dikonfigurasi dan dibuat)
<?php
require_once('gridphp.php');
$pdf=new PDF_Grid();
/*
//
*/
$pdf->inclined = true; //
$pdf->SetMargins(5,5,25); //
$pdf->grid = 18; //
$pdf->AddPage();
/*
// ( )
*/
switch ($_POST['type_letter_propisi']) {
case 0: //
$pdf->AddFont('LearningCurve-Bold','','learning_curve_bold_ot_tt.php');
$pdf->SetFont('LearningCurve-Bold','',36);
$pdf->SetTextColor(140,140,140);
break;
case 1: //
$pdf->AddFont('LearningCurve-dashed','','learning_curve_dashed_ot_tt.php');
$pdf->SetFont('LearningCurve-dashed','',36);
$pdf->SetTextColor(0,0,0);
break;
default:
$pdf->Write(18,", ");
break;
}
$text_propisi = mb_convert_encoding($_POST['data1'], "cp1252");
$pdf->Write(18,"$text_propisi"); //
$pdf->Output();
?>
Semuanya sudah siap! Di bawah ini saya lampirkan hasil yang diperoleh:
Hanya selembar
Garis abu-abu normal Garis
bertitik
Keluaran
Dengan biaya yang minimal, kami mendapatkan generator resep kami sendiri. Kemudian Anda dapat menambahkan berbagai fungsi menarik di sini: memilih ukuran dan warna huruf, bahasa, dll.
Tautan ke GitHub
P.S. Saya sedang melakukan proyek di server lokal, menggunakan xampp