Pembahasan UAS Mata Kuliah Pengembangan Aplikasi Bergerak

Soal no. 1 Pembahasan soal no. 1 Mendistribusikan aplikasi yang dibuat orang lain memiliki resiko yang besar terhadap akun Google Play yang kita miliki. Aplikasi yang dibuat orang lain bisa saja memuat malware ataupun konten yang tidak sesuai dengan ketentuan yang dibuat oleh Google, apabila hal tersebut ada di aplikasi yang diminta untuk kita upload, akun Google Play yang kita miliki dapat dibanned oleh Google. Jadi tidak disarankan untuk menggunakan akun Google Play developer untuk mengupload aplikasi yang dibuat oleh orang lain tanpa memastikan source code dan konten yang ada di dalamnya. Apabila tetap ingin mengunggah aplikasi yang dibuat oleh orang lain sebaiknya gunakan akun baru yang terpisah dari akun yang biasa kita gunakan. Soal no. 2 Pembahasan soal no. 2 Tracking aktivitas user di smartphone lazim digunakan untuk menghadirkan iklan yang terpersonalisasi, atau iklan yang sesuai dengan preferensi user. Hal ini akan meningkatkan peluang sebuah iklan diklik oleh user karena mem

Integrasi Editor TinyMCE di Framework Laravel

Saya mengikuti tutorial Laravel 8 yang ditulis di https://ilmucoding.com/crud-laravel-8/. Melalui tutorial tersebut saya membuat web app sederhana yang saya sebut myblog, melalui web yang saya buat saya dapat melakukan CRUD : menulis postingan, mengedit postingan, menampilkan postingan dan menghapusnya.

Saya menambahkan fitur WYSIWYG editor pada halaman Create New Post. Terdapat beberapa library yang bisa kita gunakan untuk menambahkan fitur tersebut, diantaranya adalah TinyMCE dan CKEditor. Pada tutorial kali ini akan saya bagikan cara menambahkan editor TinyMCE.

Tambahkan baris berikut sebelum </head>

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>

<script>
	tinymce.init({
		selector: '#mytextarea'
	});
</script>
Saya tambahkan code tersebut di dalam file template_tinymce.blade.php yang ada di dalam folder resources/views. Berikut ini adalah source code lengkapnya
<!--file : resources/views/template_tinymce.blade.php-->
<!DOCTYPE html>
<html>
<head>
    <title>Tutorial CRUD Laravel 8 untuk Pemula - Ilmucoding.com</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    
    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>

	<script>
		tinymce.init({
			selector: '#mytextarea'
		});
	</script>
</head>
<body>
 
<div class="container">
    @yield('content')
</div>
 
</body>
</html>

no-api-key pada scipt di atas dapat diganti dengan API key hasil registrasi di web TinyMCE untuk menghilangkan error message This domain is not registered with Tiny Cloud ... dst.

Selanjutnya edit file resources/views/posts/create.blade.php. Ganti @extends menjadi
@extends('template_tinymce')

dan tambahkan id="mytextarea" ke dalam tag textarea, berikut ini adalah source code lengkapnya

<!--file : resources/views/posts/create.blade.php-->
@extends('template_tinymce')
 
@section('content')
<div class="row mt-5 mb-5">
    <div class="col-lg-12 margin-tb">
        <div class="float-left">
            <h2>Create New Post</h2>
        </div>
        <div class="float-right">
            <a class="btn btn-secondary" href="{{ route('posts.index') }}"> Back</a>
        </div>
    </div>
</div>
 
@if ($errors->any())
    <div class="alert alert-danger">
        <strong>Whoops!</strong> There were some problems with your input.<br><br>
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
 
<form action="{{ route('posts.store') }}" method="POST">
    @csrf
 
     <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Title:</strong>
                <input type="text" name="title" class="form-control" placeholder="Title">
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Content:</strong>
                <textarea id="mytextarea" class="form-control" style="height:150px" name="content" placeholder="Content"></textarea>
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 text-center">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </div>
 
</form>
@endsection
Berikut ini adalah tampilan halaman Create New Post dengan editor TinyMCE

Kita dapat melakukan formatting pada teks yang ditulis, misalnya membuat huruf menjadi miring dan tebal, atau membuat teks menjadi heading.

Selanjutnya adalah mengedit source code untuk menampilkan postingan. Edit file  resources/views/posts/show.blade.php, ubah baris
{{ $post->content }}
menjadi
{!! $post->content !!}

Berikut ini adalah source code lengkap file resources/views/posts/show.blade.php

<!--file : resources/views/posts/show.blade.php-->
@extends('template')
 
@section('content')
    <div class="row mt-5 mb-5">
        <div class="col-lg-12 margin-tb">
            <div class="float-left">
                <h2> Show Post</h2>
            </div>
            <div class="float-right">
                <a class="btn btn-secondary" href="{{ route('posts.index') }}"> Back</a>
            </div>
        </div>
    </div>
 
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Title:</strong>
                {{ $post->title }}
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Content:</strong>
                {!! $post->content !!}
            </div>
        </div>
    </div>
@endsection

Berikut ini adalah tampilan halaman Show Post yang sekarang dapat merender tag html hasil menulis di editor TinyMCE.

Edit juga file resources/views/posts/edit.blade.php agar halaman edit post juga dilengkapi dengan editor TinyMCE, sama seperti create.blade.php dengan mengubah @extends dan menambahkan id pada textarea

<!--file : resources/views/posts/edit.blade.php-->
@extends('template_tinymce')
 
@section('content')
    <div class="row mt-5 mb-5">
        <div class="col-lg-12 margin-tb">
            <div class="float-left">
                <h2>Edit Post</h2>
            </div>
            <div class="float-right">
                <a class="btn btn-secondary" href="{{ route('posts.index') }}"> Back</a>
            </div>
        </div>
    </div>
 
    @if ($errors->any())
        <div class="alert alert-danger">
            <strong>Whoops!</strong> There were some problems with your input.<br><br>
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
 
    <form action="{{ route('posts.update',$post->id) }}" method="POST">
        @csrf
        @method('PUT')
 
         <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <strong>Title:</strong>
                    <input type="text" name="title" value="{{ $post->title }}" class="form-control" placeholder="Title">
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <strong>Content:</strong>
                    <textarea id="mytextarea" class="form-control" style="height:150px" name="content" placeholder="Content">{{ $post->content }}</textarea>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 text-center">
              <button type="submit" class="btn btn-primary">Update</button>
            </div>
        </div>
 
    </form>
@endsection

Source code lengkap dapat diunduh dari repo Github https://github.com/ardhiesta/myblog/releases/tag/v0.1

Comments